• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Responsive secondary menu

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive secondary menu

This topic is: resolved
  • This topic has 4 replies, 3 voices, and was last updated 8 years, 3 months ago by jodzeee.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 19, 2014 at 1:14 am #110517
    jodzeee
    Member

    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!

    June 19, 2014 at 5:01 am #110532
    Marco
    Member

    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

    June 19, 2014 at 1:14 pm #110603
    jodzeee
    Member

    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.

    October 13, 2014 at 7:18 am #127665
    francky
    Member

    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

    October 13, 2014 at 1:48 pm #127697
    jodzeee
    Member

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble