Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] pull another custom menu into the mobile menu

Home Forums Support pull another custom menu into the mobile menu

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #72279
    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!

    #72428
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #72505
    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 🙂

    #72614
    Tom
    Lead Developer
    Lead Developer

    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>
    #72642
    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.

    #73030
    Tom
    Lead Developer
    Lead Developer

    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.

    #73107
    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>

    #73140
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for sharing your code! 🙂

    #73300
    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.

    #73621
    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 🙂

    #73638
    Dee Broughton

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

    #73696
    Tom
    Lead Developer
    Lead Developer

    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).

    #73701
    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 🙂

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.