Community Forums › Forums › Archived Forums › Design Tips and Tricks › Collapsing mobile menus?
Tagged: menus mobile generate
- This topic has 7 replies, 2 voices, and was last updated 9 years, 3 months ago by Christoph.
-
AuthorPosts
-
January 8, 2015 at 8:45 pm #136441YossifMember
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.
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/WArzt8TJanuary 8, 2015 at 11:57 pm #136456ChristophMemberHi,
maybe these tutorials can help:
http://sridharkatakam.com/add-beautiful-pros-mobile-responsive-menu-genesis-themes/
http://sridharkatakam.com/make-header-menu-genesis-mobile-responsive-similar-beautiful-pro/
http://wpsites.net/web-design/genesis-mobile-responsive-nav-menu-sub-menu/
http://ozzyrodriguez.com/tutorials/genesis/genesis-responsive-menu-2-0/
January 14, 2015 at 4:06 pm #137482YossifMemberHey 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
January 14, 2015 at 4:14 pm #137485YossifMemberOK 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.
-YossifJanuary 14, 2015 at 6:59 pm #137502ChristophMemberHi,
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"); }); }); });
January 15, 2015 at 9:32 am #137541YossifMemberHmm 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!!
-YossifJanuary 19, 2015 at 12:43 pm #137936YossifMemberBump? Can anyone help me out here?
January 19, 2015 at 3:45 pm #137981ChristophMemberHi Yossif,
you have to change
nav
to#nav
in the css you have added.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.