Collapsing mobile menus?

[Yossif]

Hello, I'm trying to figure out how I can make my Generate theme have collapsible menus for mobile users.

The current menus are all automatically displayed and take up the entire screen for a mobile user.

It currently looks like this.

I'd like to make it so the menus are minimal for mobile users and instead lets them open them if they want to see more, but is usually collapsed by default.

How can I do this? Thanks!

-Yossif

http://imgur.com/WArzt8T

[Christoph]

Hi,

maybe these tutorials can help:

How to add Beautiful Pro’s mobile responsive menu in other Genesis themes

How to make Header menu in Genesis mobile responsive similar to that in Beautiful Pro

Genesis Mobile Responsive Nav Menu

http://ozzyrodriguez.com/tutorials/genesis/genesis-responsive-menu-2-0/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Yossif]

Hey Christoph, thanks for the links...

So I tried the first 3 and none seemed to work. I tried Ozzy's version and it sorta works, it just made it so the sub menus don't display...

While that's an improvement, I'm still stuck on a miscoding somewhere.

You can see it here: angrynutrition.com

Any thoughts why it isn't working for the main menus?

-Yossif

[Yossif]

OK I read through the posts on Ozzy's page and found that maybe changing the "nav" to ".nav-primary" may help to fix all this... but I'm a bit confused exactly which "nav" parts to change?

Any thoughts?

Keep in mind, I'm a coding newbie so any help is appreciated.
-Yossif

[Christoph]

Hi,

you have to add #nav and #subnav to the js script of Sridhar (first tutorial),
so the file looks something like this:

jQuery(function( $ ){

	$("header .genesis-nav-menu, #nav, .nav-primary .genesis-nav-menu, #subnav, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

	$(".responsive-menu-icon").click(function(){
		$(this).next("header .genesis-nav-menu, #nav, .nav-primary .genesis-nav-menu, #subnav, .nav-secondary .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 768) {
			$("header .genesis-nav-menu, #nav, .nav-primary .genesis-nav-menu, #subnav, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});

	$(".responsive-menu > .menu-item").click(function(event){
		if (event.target !== this)
		return;
			$(this).find(".sub-menu:first").slideToggle(function() {
			$(this).parent().toggleClass("menu-open");
		});
	});

});

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Yossif]

Hmm the plot thickens...

OK So, still trying out Ozzy's version (#4), I changed them to #nav in the js:

( function( window, $, undefined ) {
	'use strict';
 
	$( '#nav' ).before( '<button class="menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to menus
	$( '#nav .sub-menu' ).before( '<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to sub menus
 
	// Show/hide the navigation
	$( '.menu-toggle, .sub-menu-toggle' ).on( 'click', function() {
		var $this = $( this );
		$this.attr( 'aria-pressed', function( index, value ) {
			return 'false' === value ? 'true' : 'false';
		});
 
		$this.toggleClass( 'activated' );
		$this.next( '#nav, .sub-menu' ).slideToggle( 'fast' );
 
	});
 
})( this, jQuery );

NOW I'm finally getting the hamburger showing up, but the menu is expanded by default... so something is sorta working! Here's when the button is on/off:

<button class="menu-toggle" role="button" aria-pressed="false"></button> 
<button class="menu-toggle activated" role="button" aria-pressed="true"></button>

When open, the code is:
<div id="nav" style="display: block;"><div class="wrap"><ul id="menu-primary" class="menu genesis-nav-menu menu-primary"><li id="menu-item-1488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1488"> (followed by all the links)

When closed, it is:
<div id="nav" style="display: none;"><div class="wrap"><ul id="menu-primary" class="menu genesis-nav-menu menu-primary"><li id="menu-item-1488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1488">

Strange that it's still called "nav" in this case vs. nav-primary or #nav? Then again, I barely know anything about coding, so any ideas are appreciated. Thanks for help so far!!
-Yossif

[Yossif]

Bump? Can anyone help me out here?

[Christoph]

Hi Yossif,

you have to change nav to #nav in the css you have added.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts