[Resolved] pull another custom menu into the mobile menu

[morriscountynj]

is there a way to do this? for example:

I have a top navigation (#site-navigation)
then i have a side navigation using a custom menu in a widget (#menu-sidenav)

what i’d like to do is, upon triggering the responsive menu, pull in #menu-sidenav so that both menus are displayed. Looking at navigation.js, this definitely looks possible, but I’m having issues with it.

i see there’s
container = document.getElementById( 'site-navigation' );

is there a way to add ‘menu-sidenav’ to that somehow? i tried it out but it broke the menu.

thank you so much!

[Tom]

Hi there,

Are you trying to merge the two navigations together, or give them both the same mobile functionality?

[morriscountynj]

I’m trying to merge the two navigations together but only in the mobile menu.

so basically what this does https://github.com/mambows/mobilemenu with this call

$(document).ready(function(){
	$('#site-navigation, #menu-sidenav').mobileMenu();
});

I’m sorry I can’t send you a link but this is all being developed locally. Thanks so much 🙂

[Tom]

That plugin won’t work as it’s trying to create a select dropdown from the menus.

You’ll need some custom jQuery for this to work – I have something that may work (untested) – we may need to tweak it.

In GP Hooks, add this to the “wp_footer” area:

<script>
      jQuery(document).ready(function($) {
            $('#menu-sidenav ul').children('li').appendTo('#site-navigation ul');
            $('#menu-sidenav ul').remove();
      });
</script>

[morriscountynj]

when i do that, the code appears before the rest of the javascript, so it doesn’t pick it up.

so this
<script> jQuery(document).ready(function($) { $('#menu-sidenav ul').children('li').appendTo('#site-navigation ul'); $('#menu-sidenav ul').remove(); }); </script>

then this (minified)

..
prosecutor/wp-content/plugins/gp-premium/addons/generate-secondary-nav/inc/js/navigation.js,prosecutor/wp-content/plugins/wp-accessibility/js/longdesc.button.js,prosecutor/wp-content/themes/generatepress/js/navigation.js,prosecutor/wp-content/themes/generatepress/js/superfish.js

i’m trying to find a way to move where the hook appears but no luck so far.

[Tom]

Hmm, well it doesn’t matter where it shows up, but looking at the code I provided I don’t think it will work.

I’ll have to do some looking around to find a better alternative.

[morriscountynj]

I put this below wp_footer (in footer.php) and it actually seems to work!

<script>
jQuery(document).ready(function($) {

// add a class to the items in the side nav so that i can target them.
// put the entire side nav content into a variable
// put the side nav menu into a variable

$(‘#menu-sidenav’).children(‘li’).addClass(‘addednav’);

var sidebarContent = $(‘#left-sidebar’).html(); // what in #left-sidebar, which is .inside-left-sidebar
var sidebarNav = $(“#menu-sidenav”).html(); // the li’s within the sidenav

// if width is mobile by default, add the sidebar nav items to the main menu, and remove the sidebar.

if ($(window).width() <= 767 ){
$( “#menu-main-menu” ).prepend( $( sidebarNav ) );
$( “.inside-left-sidebar” ).remove();

}

// if resized to mobile width, add a class to the sidebar nav menu items, then add those to the main nav. remove the “addednav” class items when you put it back.

$(window).resize(function() {
if ($(window).width() <= 767 ) {

$( “#menu-main-menu” ).prepend( $( sidebarNav ) );
$( “.inside-left-sidebar” ).remove();

}
});

$(window).resize(function() {
if ($(window).width() >= 768 ) {
$(‘#menu-main-menu’).children(‘li.addednav’).remove();
$( “.inside-left-sidebar” ).remove(); // so it doesn’t come up twice
$(‘#left-sidebar’).append( $(sidebarContent) );

}

});
});

</script>

[Tom]

Awesome, thanks for sharing your code! 🙂

[Dee Broughton]

I think I understand this, but not entirely sure. I wanted to add the alternative I used, in case it might be helpful to others looking for this topic who want something similar but don’t know as much code as OP. It seems morriscountynj, the OP, is only using the main-navigation and a custom menu, so, I would think, the secondary-navigation is available.

When I wanted to use a different menu for mobile, I just used CSS and the customizer to have the main-navigation show up in regular view while hiding the secondary, then hid the main and showed secondary in the mobile view. I was able to do it eventhough I can’t do code this advanced.

[morriscountynj]

I was thinking about doing that actually. On the websites I currently manage, I do this with our side navigation (for example check out morrishumanservices.org). The only issue is that the side nav still loads, but it’s just hidden. I wanted to see if there was a way to do this with code so that it actually gets removed as opposed to just hidden.

Also this is my first foray into coding my own javascript (as opposed to just editing other people’s) so there might have been a better way to do this 🙂

[Dee Broughton]

Great point, morriscountynj, about it loading but being hidden. I’m still scared of javascript. 🙂

[Tom]

It looks like you’re using jQuery’s remove() function, which should be removing the element from the page, not just hiding it? (hide() does that).

[morriscountynj]

yeah something weird was happening where, when i resized and then sized back, an extra copy of the side navigation came up. i couldn’t figure out why! so i ended up putting in remove() to get rid of the extra copy. cheating, i know 🙂

[Author]

Posts