Responsive secondary menu

Community Forums Forums Design Tips and Tricks Responsive secondary menu

This topic is: resolved

This topic contains 4 replies, has 3 voices, and was last updated by  jodzeee 1 year, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #110517


    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:




    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>');
    		$(".nav-primary .genesis-nav-menu").slideToggle();
    		$(".nav-secondary .genesis-nav-menu").slideToggle();
    		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

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

    tested on localhost. Works flawlessly.

    • This reply was modified 1 year, 5 months ago by  Marco.
    • This reply was modified 1 year, 5 months ago by  Marco.


    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.



    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.




    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?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.