Dynamic Menu in Elementor Nav Bar
I am creating a website with Elementor Pro where I use the "Nav Menu" element in the header. My problem is that I want some Menu items in the Desktop view mode and some in the mobile view. My solution was to use two different menus that get displayed in each case.
- I tried Elementors Responsive function, but the Menu option is not dynamic
- I tried some code from Stack Overflow in the themes PHP file, but it only worked with the themes built in nav bar, not with elementors one
if ( wp_is_mobile() ) {
wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}
I don't know more and need help aproaching the problem in a different way, thank you!
Elementor has viewport options for all of its elements: https://elementor.com/help/mobile-editing/. You'll end up having two Menu layers, one for desktop, and one for mobile. Make sure to adjust the visibility for each one to be correct.
Another option is to add classes to the menu items in the Menus interface that hides the items on mobile. You'll need to define the class in Elementor's Custom CSS feature. This may end up becoming complex depending on your menu's structure.
