The menu button is showing up at 722px, but you have a rule for .main-navigation ul.nav-menu.toggled-on under the 722px section for display: none;. Try taking out the selector from that rule and moving it to the rule below, which has display:inline-block !important;.
From this:
@media screen and (min-width: 722px)
{
.main-navigation ul.nav-menu.toggled-on, .menu-toggle {
display: none;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
display:inline-block !important;
}
To this:
@media screen and (min-width: 722px)
{
.menu-toggle {
display: none;
}
.main-navigation ul.nav-menu.toggled-on, .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
display:inline-block !important;
}
Thanks, but that didn’t seem to have any effect. The menu button still isn’t functioning above 617px viewport width.
Oops, sorry, I just noticed you’re using min-width in your media query and not max-width.
In the min-width: 600px section, swap the order of these two rules:
From this:
.main-navigation ul.nav-menu.toggled-on, .menu-toggle {
display: inline-block;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
display:none !important;
}
To this:
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
display:none !important;
}
.main-navigation ul.nav-menu.toggled-on, .menu-toggle {
display: inline-block;
}
Once again, I appreciate your efforts to help. But once again I tried this and it had no effect.
I can’t help thinking that twenty twelve would handle this by default in the base styles, and that I must have done something in my own media queries that is preventing it from working properly. And as it works properly below 617px viewport, then the error I made must be in the min-width 600px MQ. I just don’t see it.
While your solution didn’t fix the problem, it did point me in the right direction. I’m making progress and have the menu button functioning above 617px viewport now. It isn’t quite right, but I know I can make it right at this point…just a matter of CSS.
I don’t understand how 2012 makes the dropdown work and look right under 617px but above 617px I have to re-style it.
In any case, you assistance has allowed me to progress. Thank you!
