WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. rook
    Member
    Posted 11 months 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 Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months 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 11 months 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 11 months 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 11 months 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 Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

    Can you link the webpage which has the custom menu?

  7. rook
    Member
    Posted 11 months 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 Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months 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 11 months ago #

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

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

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

  11. rook
    Member
    Posted 11 months ago #

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

  12. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

    Try adding another li in there;

    .main-navigation li li:first-child
  13. rook
    Member
    Posted 11 months 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 Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

    Not sure what you're asking, sorry.

  15. rook
    Member
    Posted 11 months 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.

Reply

You must log in to post.

About this Topic