WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty twelve, remove responsive menu (15 posts)

  1. rook
    Member
    Posted 1 year ago #

    Hello all

    I have looked around extensively for this and cant seem to find an answer I can get to work. I have managed to get rid of the menu toggle, but the menu still displays vertically instead of horizontal on a mobile device, and the sub menu's just automatically display instead of being submenus.

    here is a link to my site: http://www.boogie-bop.co.uk/about/

    the reason this is being a problem is because I am replacing the menu items with images. any help would be very much appreciated.

    cheers

    harry

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Download this Custom CSS Manager and within its section of the dashboard, enter this;

    .main-navigation div.nav-menu > ul,
    .main-navigation li,
    .main-navigation li a {
     display: inline-block;
    }
    
    .menu-toggle {
     display: none;
    }
    
    .main-navigation li {
     margin: 0 40px 0 0;
     margin: 0 2.857142857rem 0 0;
     position: relative;
    }
    
    .main-navigation div.nav-menu > ul {
     border-bottom: 1px solid #ededed;
     border-top: 1px solid #ededed;
     display: inline-block !important;
     text-align: left;
     width: 100%;
    }
    
    .main-navigation li a {
     border-bottom: 0;
     color: #6a6a6a;
     line-height: 3.692307692;
     text-transform: uppercase;
     white-space: nowrap;
     text-decoration: none;
    }
    
    .main-navigation .current_page_item > a {
     color: #636363;
     font-weight: bold;
    }
    
    .main-navigation li ul {
     display: none;
     margin: 0;
     padding: 0;
     position: absolute;
     top: 100%;
     z-index: 1;
    }
    
    .main-navigation ul li:hover > ul {
     border-left: 0;
     display: block;
    }
    
    .main-navigation li ul li a:hover {
     background: #e3e3e3;
     color: #444;
    }
    
    .main-navigation li ul li a {
     background: #efefef;
     border-bottom: 1px solid #ededed;
     display: block;
     font-size: 11px;
     font-size: 0.785714286rem;
     line-height: 2.181818182;
     padding: 8px 10px;
     padding: 0.571428571rem 0.714285714rem;
     width: 180px;
     width: 12.85714286rem;
     white-space: normal;
    }

    Alternatively place that code in the style.css of your Child Theme.

    Any modifications to the theme files will be erased when the theme updates.

  3. rook
    Member
    Posted 1 year ago #

    Hey I tried putting that in my child theme, it removes the toggle on my phone but now there isn't any menu at all on the phone? have I done anything wrong? I copied and pasted all of the above into my c hild theme css

  4. rook
    Member
    Posted 1 year ago #

    Wait its working now, dont know what changed maybe my servers went slow, thank you so much for the help very much appreciated.

    all the best

    Harrry

  5. rook
    Member
    Posted 1 year ago #

    wait again, sorry. It works for the primary menu, but not for any custom menus I add. I'll try and find away to add images to he standard menu. Cheers

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you link the webpage which has the custom menu?

  7. rook
    Member
    Posted 1 year ago #

    I no longer have the menu on, I am now getting the images via li.page-item-? and adding a background image from there. But I cant for the life of me work out the home page menu class, I have tried = li.home, li.menu-item-home..nothing seems to work. bah.

    http://www.boogie-bop.co.uk/about/

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Only if you use a custom menu will the homepage item behave like any other menu item and have particular classes applied to it. At the moment it has no classes.

    If you want to, you could use CSS first-child to identify it:

    .main-navigation li:first-child
  9. rook
    Member
    Posted 1 year ago #

    brilliant, your a legend, any ideas on how I can do the same thing to the sub menu's?

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry, what is it you want to do to the submenus?

  11. rook
    Member
    Posted 1 year ago #

    sorry identify it like with ".main-navigation li:first-child"

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding another li in there;

    .main-navigation li li:first-child
  13. rook
    Member
    Posted 1 year ago #

    wait i messed up again, Its for the submenu but the sub menu has ul class children and .page-item-37 has page item ids?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Not sure what you're asking, sorry.

  15. rook
    Member
    Posted 1 year ago #

    Its fine I worked it out, for future reference to replace the text in sub menus with an image in twenty twelve theme use

    .main-navigation li ul li.page-item-37

    page-item-37 being whatever your page item id is.

    cheers for all your help Andrew very much appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic