I’m working on a child theme of Vantage Premium where I use several menus, my problem is that I don’t want all of them to retract on mobile. I would like to select by id or slug which menus I want to be responsive or which I don’t.
I thought the right place to do this would be the ‘siteorigin_mobilenav_nav_filter’ function but I don’t see how to specify if I want a menu to be affected or not.
Is there any way to do this without modifying the core?
Hi Ovejabeja
mobilenav.js walks the main menu and creates a new one for the mobile navigation. I’d need to seek out consulatation from our dev team on how you might change that behaviour.
Something you can do right now that’s relatively quick and easy is this:
1. Install: https://wordpress.org/plugins/menu-items-visibility-control/
2. Go to Appearance > Menus, select your primary menu and edit a menu item you don’t want showing up for mobile.
3. Locate the new Visibility field in the menu item and insert:
This won’t hide the menu item if you’re resizing your browser window, but, it will hide the menu item for a mobile device which is where the mobile menu is almost always used.
In the end I solved it without the need of installing a plugin. In case it helps someone, in the functions.php of my theme I wrote:
/* Responsive Menu */ // Remove SiteOrigin's function hook function remove_siteorigin_mobilenav_nav_filter() { remove_action('wp_nav_menu', 'siteorigin_mobilenav_nav_filter', 10, 2); remove_action('wp_page_menu', 'siteorigin_mobilenav_nav_filter', 10, 2); } add_action( 'wp_loaded', 'remove_siteorigin_mobilenav_nav_filter' ); // Rewrite SiteOrigin's function to allow $excluded_nav_menus function custom_mobilenav_nav_filter($nav_menu, $args, $excluded_nav_menus = array('my-menu-1','my-menu-2')) { $args = (object) $args; if( (empty($args->theme_location) && !apply_filters('siteorigin_mobilenav_is_valid', false, $args)) || in_array($args->menu->slug,$excluded_nav_menus) ) return $nav_menu; static $mobile_nav_id = 1; // Add a marker so we can find this menu later $nav_menu = '<div id="so-mobilenav-standard-'.$mobile_nav_id.'" data-id="'.$mobile_nav_id.'" class="so-mobilenav-standard"></div>'.$nav_menu; // Add the mobile navigation marker $nav_menu .= '<div id="so-mobilenav-mobile-'.$mobile_nav_id.'" data-id="'.$mobile_nav_id.'" class="so-mobilenav-mobile"></div>'; // Create the mobile navigation $class = $args->container_class ? ' class="' . esc_attr( $args->container_class ) . '" menu-mobilenav-container' : ' class="menu-mobilenav-container"'; $id = $args->container_id ? ' id="' . esc_attr( $args->container_id ) . '"' : ''; $nav_menu .= '<'. $args->container . $id . $class . '>'; $text = array( 'navigate' => __( 'Menu', 'vantage' ), 'back' => __( 'Back', 'vantage' ), 'close' => __( 'Close', 'vantage' ), ); $text = apply_filters('siteorigin_mobilenav_text', $text); $wrap_class = $args->menu_class ? $args->menu_class : ''; $wrap_id = 'mobile-nav-item-wrap-'.$mobile_nav_id; $items = '<li><a href="#" class="mobilenav-main-link" data-id="'.$mobile_nav_id.'"><span class="mobile-nav-icon"></span>'.$text['navigate'].'</a></li>'; $nav_menu .= sprintf( $args->items_wrap, esc_attr( $wrap_id ), esc_attr( $wrap_class ), $items ); $nav_menu .= '</' . $args->container . '>'; $mobile_nav_id++; return $nav_menu; } add_action('wp_nav_menu', 'custom_mobilenav_nav_filter', 10, 3); add_action('wp_page_menu', 'custom_mobilenav_nav_filter', 10, 3);Nicely done :) Really glad to hear you were able to resolve.
(For anyone else reading, please, remember to add new functions like the above to your child theme’s functions.php file).