Responsive Menu replaces content

[TGScreative]

I create a responsive dropdown menu in Genesis using code I found here
http://bradpotter.com/create-a-responsive-mobile-menu-from-the-header-navigation-menu/
The menu look great on the home page. The horizontal menu is converted to a vertical menu and it is easy to select the page you want to visit.
Two problems though on secondary pages.
1. The page content doesn't appear!
2. The menu is way too long to appear on each page. Better if the submenu items are hidden under menu headers are clicked on. Or the entire menu is replaced with a hamburger icon.
Any suggestions on how to go about getting the content back again? And creating a workable secondary page menu?

http://jeffcohan.net/lcc/

[David Chu]

Hi,
An interesting question. It illustrates the true evil of excessive dropdowns, which are adored by "the professions", such as doctors, lawyers, etc. OK, end of rant. 🙂

Brad would tell you that the answer is right in the title of the article - this is for a menu that's based in the header, not the primary menu. BUT I believe I can steer you in the right direction. You have a fixed height on that primary menu. So when the thing goes all vertical, the browser thinks that it's still short, and thus does not push the content down.

Try this little bit of CSS, which allows the menu to breathe when it gets longer, at around iPad portrait size. Suddenly content will be visible, as it's properly pushed down like normal. Then since you can see it, you can adjust other styling to taste.

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

	.nav-primary {
		height: auto;
	}

}

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[TGScreative]

Thanks David. That does seem to help to view content.
I agree with you about the bloated navigation.

Any ideas how to compress the navigation into a hamburger icon or something else, so it won't take up most of page real estate?

[David Chu]

Hi,
Those hamburger menus are very complicated. I'd suggest leaving well enough alone unless you want to junk all the work you just did, and start over.

If you're up for lots more coding, adapting for your site, and debugging, you can try this:
http://ozzyrodriguez.com/tutorials/genesis/genesis-responsive-menu-2-0/

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts