I think this CSS will get you close to what you’re looking for
@media screen and (min-width: 450px ) {
.menu-toggle {
display: none;
}
.main-navigation ul.nav-menu {
border-top: solid 1px #ededed;
border-bottom: solid 1px #ededed;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}
.main-navigation ul.nav-menu li {
display: inline-block !important;
margin: auto 5px auto 5px;
}
}
Jarret,
I got strange results using your css code. I deleted all of my child code and added your code. Just to insure my code was not a problem.
Above screen width 600px, the menu displayed – Okay (as expected)
At screen width 600px down to 450px, the menu DOES NOT display – Not Okay
At screen width 450px and lower, the menu-toggle displays – Okay (as expected)
While the menu-toggle was displayed – clicked it and the drop down menu displayed (i.e. ACTIVATED the menu-toggle) – Okay (as expected)
Left the menu-toggle ACTIVATED and found that at screen width 600px down to 450px, the menu DOES display (strange). Also, above screen width 600px, the menu displayed as expected.
So (I think), twentytwelve is designed to switch to a non-activated menu-toggle at screen width 600px – somehow/somewhere.
Is there a way to expand your code to allow the menu to display at screen widths between 600px and 450px?
Ah, your code is a bit different as I tested on a default install of TwentyTwelve. Try adding the following to your site to get the menu to display
.main-navigation ul.nav-menu {
display: initial;
}
Hello Jarret,
The css you provided came close to doing what I was looking for. My sites menu has drop down sub-menus. These drop downs need to be eliminated at about 800px and less.
I found @media screen and (min-width: 600px) in the 2012 css. Through testing, I extracted the css which accomplished what I wanted. Below is the css I used to build a test child css. It is installed in a test sub-domain site at https://togg.aafords.com/.
/* START Change menu-toggle display starting at 400px rather than 600pm ——– */
@media screen and (max-width: 800px) {
/* Stop main menu drop down (level 2-3) from displaying */
.main-navigation li ul li a {
display: none;
}
}
@media screen and (min-width: 400px ) {
/* Override of theme 2012 600px css */
.main-navigation ul.nav-menu li {
display: inline-block !important;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: inline-block !important;
}
.main-navigation li ul {
position: absolute;
}
.menu-toggle {
display: none;
}
}
/* END.. Change menu-toggle display starting at 400px rather than 600pm ——– */
This post has been resolved with input from Jarret and additional testing.
