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 month, 2 weeks ago.

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

    jodzeee
    Participant
    Post count: 231

    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!

    #110532

    Marco
    Participant
    Post count: 63

    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.


    • This reply was modified 5 months, 1 week ago by  Marco.
    • This reply was modified 5 months, 1 week ago by  Marco.
    #110603

    jodzeee
    Participant
    Post count: 231

    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.

    #127665

    francky
    Participant
    Post count: 42

    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

    #127697

    jodzeee
    Participant
    Post count: 231

    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.