Width At Which Menu Becomes Responsive or Toggles

Hi there, I’m not sure if this is what you are looking for, but have you seen this excellent code snippet from Dave? It should be your starting point of course.

And if you use any developers tool/code inspector, such as firebug, then I believe you should be able to modify your child theme accordingly. Hope this gives you a few ideas and hints…

Cheers,
Markus

Your parent theme twenty-twelve is a mobile first layout (styles are declared for small-screen view and as media queries deal with larger screens). Your child them Revision Courses is desktop first (styles declared for big-screen view and media queries deal with smaller screens).

So Twenty-twelve has styles kicking in once it is bigger than 600px and the child theme has different styles kicking in once its smaller than 770px. All the style changes that are happening at 600px (@media screen and (min-width: 600px)) in twenty-twelve need to be redeclared in your child theme’s style and kind of undone by declaring the values those menu elements had before the @media screen and (min-width: 600px). An example would be parent theme’s style @media screen and (min-width:600px){ .main-navigation li a{ display: inline-block; ...}} needs to be declared and changed in child them @media screen and (min-width:600px){ .main-navigation li a{ display:block;...} }

Once you’ve undone the style changes the parent theme was adding at min-width:600x; you need to re-declare them where you want e.g. @media screen and (min-width:725px){ .main-navigation li a{ display:inline-block;...} }

Best keep to child themes that are mobile first if the parent theme is.

Thank you both for your replies.

@ryansantschi – thank you for such an in depth analysis of the theme. I totally forgot the “mobile first” approach of twenty twelve which you pointed out. I will take your suggestions on board and post back once I have tried them.

Hello Again,

I seem to be 50% there. This is what I have done;

@media only screen and (max-width: 770px) {

.main-navigation li a,
	.main-navigation li {
		display: block;
	}

	.menu-toggle {
		display: block;
	}
}

The issue now is that the “menu” is always open (expanded). I do not have to click on the word “Menu” to open it. All “li” items just appear under each other.

Baffled, have spent close on ten hours at this now and nothing. Everything above 768px works as I want and everything below 600px works as I want.

It is just both 768px & 600px that the toggle menu is always expanded, ie, all menu items visible as a list. I do not need to tap “Menu” to open the menu.

See https://www.dhk.ie on small screen to view issue.

What do you want to happen at 600px, do you want the menu to be hidden or the toggle button to be hidden?

Hi Andrew,

Thanks for the reply.

At 768 (and below) I want the menu to hide and the toggle button to appear . As it stands, the menu appears vertically in full without the need to press “Main Menu”.

I want it to work at 768px & 600px as it currently does at 568px and below?

Does this help:

@media screen and (min-width: 600px) {

 .main-navigation ul.nav-menu,
 .main-navigation div.nav-menu > ul {
  display: none !important;
 }

 .main-navigation ul.nav-menu.toggled-on {
  display: inline-block !important;
 }

}

@media screen and (min-width: 771px) {

 .main-navigation ul.nav-menu,
 .main-navigation div.nav-menu > ul {
  display: inline-block !important;
 }

}

Andrew, if you were beside me I would kiss you. Genius. Thank you so much.

I played around with what you said above and this is all that was required to get it working;

@media screen and (min-width: 771px) {
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none !important;
}

.main-navigation ul.nav-menu.toggled-on {
display: inline-block !important;
}
}

It is people like you that make WordPress so successful. Thanks again.