Mobile Category Navigation Vertical

Currently, I have a hamburger menu setup for mobile navigation on my site PantrySpa.com ... when you click on the hamburger menu, you get a list of categories to pick from (skin, health, beauty, DIY and home & garden).

I would like the hamburger menu navigation instead to show two vertical list with two columns. The first column would be labelled “Categories” and have the 5 categories (skin, health, etc.) listed beneath it and the second column would be to the right of the first column and labelled “Discover More” with a vertical list underneath it of the items shown in the pink navigation bar at the top of our desktop site (TV Shows, Recipes, Health, Home Remedies, Reviews, Entertainment). How do I do this?

If it is helpful, I have granted support access via the wpmu support plugin.

Thank you so much for your help!

  • Michael Bissett

    Hey @d-invent, hope you're doing well this evening! :slight_smile:

    Hmm... given the way that the menu sections are coded presently, I'd tempted to hide the normal desktop menu sections via CSS (the 2nd of which is your green menu bar, the current hamburger menu), and then create two new menus (outputted inside of a parent div, with each menu occupying it's own child div element inside that parent div).

    You would be able to create a split div section with the two menu sections, without having to re-work the present div sections for your menus. Plus, should you need to add/remove an item from one of the mobile menus, it wouldn't affect the desktop menus you have. :slight_smile:

    You may know how to add additional menus inside of Genesis already, but here's a tutorial on doing that just in case:

    http://wpsites.net/web-design/adding-additional-nav-menus-in-genesis/

    Hope this helps!

    Kind Regards,
    Michael

  • d-invent

    Thanks, Michael! I have created two additional menus called Mobile Main Menu (with the categories in them) and Mobile Other Sites Menu (with the "Discover More" links in them)... I was then able to assign them to genesis menus using this modified code from that link you sent:

    function register_additional_menus() {
    register_nav_menu( 'third-menu' ,__( 'Mobile Main Menu' ));
    register_nav_menu( 'fourth-menu' ,__( 'Mobile Other Sites Menu' ));
    }
    add_action( 'init', 'register_additional_menus' );

    But how do I get the menus to show up as vertical lists, side-by-side, when a user clicks on the hamburger menu (rather than what is currently shown when you click on the hamburger menu)?

    Thanks for your help!

  • d-invent

    I did some digging and found that the responsive menu seems to be generated by a javascript file called responsive-menu.js which contains this:

    jQuery(function( $ ){
    
    	$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .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-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
    	});
    
    	$(window).resize(function(){
    		if(window.innerWidth > 600) {
    			$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .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");
    		});
    	});
    
    });

    I'm not sure what / how to modify this to get the two vertical lists of the menus (with a title above each list), as I detailed in the posts above though...

  • Michael Bissett

    Hey @d-invent, my apologies for the delay here!

    This is going to require more than what I can provide here in a support thread, but in looking at this, you may wish to try an entirely different route. I came across this tutorial some time ago regarding the creation of a separate mobile menu (rather than making the primary or secondary menu into a mobile menu):

    http://bradpotter.com/responsive-mobile-navigation-menu-for-the-genesis-theme-framework/

    You may wish to have a go at that tutorial (one thought I have would be inserting two menu areas into the "gst_do_mobilenav" function there), and do a bit of reverse-engineering (mostly consisting of adding the display of two menus inside the mobile menu section, and altering the CSS code to have both menu areas have a width of 50% or so).

    However, given the task at hand here, I would advise hiring one of our Pros to handle this:

    https://premium.wpmudev.org/wordpress-development/

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.