[Resolved] Separate slide-out menu for mobile

Home Forums Support [Resolved] Separate slide-out menu for mobile

Home Forums Support Separate slide-out menu for mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1637854
    Kim

    Hi there,

    I am using a slide-out menu as well as a standard nav bar on my site, I would like to switch to just a slide-out menu on mobile but have a different menu assigned to the slide-out panel, if that makes sense?

    In the desktop version I have our main three services in the nav bar and less important page links in the slide-out. When it switches to mobile I would like to have pretty much all page links in the slide-out menu.

    Hope that makes sense!

    Many thanks

    #1637887
    Elvin
    Staff
    Customer Support

    Hi,

    To clarify: You want the menu contents of the off-canvas panel to change depending on what page you’re in?

    If that’s the case, you can use this PHP snippet.

    // Conditionally change menus
    add_filter( 'wp_nav_menu_args', 'change_wp_nav_menu_args' );
    function change_wp_nav_menu_args( $args = '' ) {
    	// change the menu in the Header menu position
    	if( $args['theme_location'] == 'slideout' && is_page('1,2,3') ) { 
    		$args['menu'] = '456'; 
    	}
    	return $args;
    }

    1,2 and 3 within is_page('...') are page IDs. You can add in your specific page IDs you want the menu change to apply.

    The 456 in `$args[‘menu’] = ‘456’; is the menu ID of the menu that contains the less important page links you want to be placed on the specified pages.

    A wise man once said:
    "Have you cleared your cache?"

    #1641302
    Kim

    Hi Elvin,

    Thanks for the reply.

    That’s almost it, but rather than the off-canvas menu changing depending on page, I would like it to change depending on whether it’s viewed on mobile or desktop, if possible?

    In the desktop version of our site, I currently have our 3 main navigation links as a standard nav bar, with lesser important links in an off-canvas menu. I would like to consolidate all of the menu options into the off-canvas panel when the site is viewed on mobile, ideally by creating a WP menu which has the links ordered as I would like.

    If it helps, the ideal menu set up would be:

    DESKTOP
    Main menu = Main Nav Links
    Off-canvas = Secondary Links

    MOBILE
    Off-canvas = Mobile menu (containing main and secondary links).

    Hope this makes sense!

    #1641429
    David
    Staff
    Customer Support

    Hi there,

    my approach would be to add ALL the menu items you want visible on your mobile device to the Off Canvas Menu. Then we can use some CSS to hide the ones you don’t require on Desktop.
    For example if you’re desktop off canvas requires 10 links, and on mobile it will display those 10 + 3 from the primary nav ( total 13 ).

    Then in your off canvas menu, select the 3 links you want hidden on desktop and give them a custom CSS Class of hide-on-desktop

    This article explains adding CSS classes to menus:

    See reference topic:

    https://generatepress.com/forums/topic/separate-mobile-menu-full-screen-off-canvas/#post-880244

    #1641539
    Kim

    Hi David,

    I did consider that as an option.

    I wasn’t sure whether this might have some impact on page load time and/or technical SEO?

    I’m happy to attempt something more technical, if it’s possible?

    Many thanks

    #1641661
    David
    Staff
    Customer Support

    No issues. It’s an acceptable responsive design practice. And it’s how GP handles the separate navigations.

    #1641745
    Kim

    Okay David, I’ll go for it.

    Thanks for your help 🙂

    #1641756
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.