Twenty twelve, remove responsive menu

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.

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

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

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

Can you link the webpage which has the custom menu?

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.

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

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

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

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

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

Try adding another li in there;

.main-navigation li li:first-child

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?

Not sure what you’re asking, sorry.

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.