Responsive secondary menu

[jodzeee]

I didn't realize the post I responded to was marked as resolved, so I'm starting a new one ...

In the Magazine Pro theme, I'm using the secondary menu instead of the primary menu and I'd like it to turn into the hamburger/responsive when it's small. I tried changing the CSS and the .js and it didn't work.

Here's my site:
http://www.ethanbearman.com/

Thanks!

[Marco]

1) replace the content of your responsive-menu.js with this:

jQuery(function( $ ){

	$(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>');
	$(".nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>');
	$("#responsive-menu-icon").click(function(){
		$(".nav-primary .genesis-nav-menu").slideToggle();
		$(".nav-secondary .genesis-nav-menu").slideToggle();
	});
	
	$(window).resize(function(){
		if(window.innerWidth > 768) {
			$(".nav-primary .genesis-nav-menu").removeAttr("style");
			$(".nav-secondary .genesis-nav-menu").removeAttr("style");
		}
	});
	
});

2) in style.css where is the media query: @media only screen and (max-width: 768px) look for .nav-primary .responsive-menu and replace the css with:

	.nav-primary .responsive-menu, .nav-secondary .responsive-menu {
		display: none;
	}

	.nav-primary #responsive-menu-icon, .nav-secondary #responsive-menu-icon {
		display: block;
		text-align: center;
	}

also comment the

	.footer-widgets,
/*	.nav-secondary,*/
	.site-footer,
	.site-header,
	.site-inner {
		padding-left: 5%;
		padding-right: 5%;
	}

tested on localhost. Works flawlessly.

---

Neat & Plain – Genesis and WordPress specialist

[jodzeee]

Thanks! I think where I got caught was the background wasn't dark so I was just seeing a blank spot. I used your code, changed the background to #222, then proceeded to tweak my CSS to move the secondary nav bar to the top like the primary. It was working great, but ...

... then I found an easier way!

In menus, I selected the one I'm using as my main nav and told it to be BOTH primary and secondary. Then in my CSS, I hid the primary, then showed it again and hid the secondary in my media query. This way, I don't have to touch the .js file.

It works great. But if anyone can think of any reason not to do it this way, let me know.

[francky]

I have tried this but the resulting hamburger icon on Secondary Menu isn't clickable.

When clicking the hamburger icon on Primary Menu, the menu in secondary menu also displays. It's working a bit strange for me.

Can you help? I shall appreciate any support.

LINK: http://bit.ly/1vmK0tu

[jodzeee]

I gave it a go and I'm not able to make it work with two menus either (my need was to make it work with the secondary and not primary, which I was able to work out). Maybe Marco can help?

[Author]

Posts