[Resolved] Separate slide-out menu for mobile

[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

[Elvin]

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.

[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!

[David]

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

[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

[David]

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

[Kim]

Okay David, I’ll go for it.

Thanks for your help 🙂

[David]

You’re welcome

[Author]

Posts