-
Posts
-
I found this, could you advise if any of these methods would work:
Create 2 menus. One for display on mobiles and one as a default for desktops. Add this code in your header.php or you could use a hook in your functions file.
<?php
if ( wp_is_mobile() ) {
wp_nav_menu( array( ‘theme_location’ => ‘mobile-menu’ ) );
} else {
wp_nav_menu( array( ‘theme_location’ => ‘desktop-menu’ ) );
}
?>
Or you could create 2 custom menus and use this code:<?php
if ( wp_is_mobile() ) {
wp_nav_menu( array( ‘menu’ => ‘mobile-menu’ ) );
} else {
wp_nav_menu( array( ‘menu’ => ‘desktop-menu’ ) );
}
?>
Or you could switch themes conditionally:add_filter( ‘stylesheet’, ‘wpsites_change_themes’ );
add_filter( ‘template’, ‘wpsites_change_themes’ );function wpsites_change_themes( $theme ) {
if ( wp_is_mobile() )
$theme = ‘my-mobile-theme’;
return $theme;
}additionally would this work with enfold:
https://wordpress.org/plugins/wordpress-mobile-pack/
With the use of mobiles and tablets increasing I think this topic will help a lot of ENFOLD users.
Hey!
I don’t think it’s possible to do this in a child theme yet but we may get this added in a future update.
For now you can do this by opening up /enfold/js/avia.js and changing line 324 from this.
var menu = header.find('.main_menu ul:eq(0)'),To this.
var menu = header.find('.main_menu ul:eq(0)'); if ( header.find('.main_menu_responsive ul:eq(0)').length != 0 ) { menu = header.find('.main_menu_responsive ul:eq(0)'); } var first_level_items = menu.find('>li').length,And then add this to the bottom of your functions.php file.
avia_nav_menus(); function avia_nav_menus() { // Override the default avia_nav_menu function to add our responsive menu global $avia_config, $wp_customize; $avia_config['nav_menus'] = array( 'avia' => array('html' => __('Main Menu', 'avia_framework')), 'avia2' => array( 'html' => __('Secondary Menu <br/><small>(Will be displayed if you selected a header layout that supports a submenu <a target="_blank" href="'.admin_url('?page=avia#goto_header').'">here</a>)</small>', 'avia_framework'), 'plain'=> __('Secondary Menu - will be displayed if you selected a header layout that supports a submenu', 'avia_framework')), 'avia3' => array( 'html' => __('Footer Menu <br/><small>(no dropdowns)</small>', 'avia_framework'), 'plain'=> __('Footer Menu (no dropdowns)', 'avia_framework')), 'avia_responsive' => array( 'html' => __('Responsive Menu <br /><small>(If set will replace your main menu on mobiles)</small>')) ); add_theme_support('nav_menus'); foreach($avia_config['nav_menus'] as $key => $value) { //wp-admin\customize.php does not support html code in the menu description - thus we need to strip it $name = (!empty($value['plain']) && !empty($wp_customize)) ? $value['plain'] : $value['html']; register_nav_menu($key, THEMENAME.' '.$name); } } add_action( 'ava_after_main_menu', 'enfold_customization_add_responsive_menu' ); function enfold_customization_add_responsive_menu() { // Display an extra menu for responsive to be picked up via javascript echo "<nav style = 'display:none;' class='main_menu_responsive' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">"; $avia_theme_location = 'avia_responsive'; $avia_menu_class = $avia_theme_location . '-menu'; $args = array( 'theme_location' => $avia_theme_location, 'menu_id' => $avia_menu_class, 'menu_class' => 'menu av-main-nav', 'container_class' => $avia_menu_class.' av-main-nav-wrap'.$icon_beside, 'fallback_cb' => false, 'walker' => new avia_responsive_mega_menu() ); wp_nav_menu($args); echo '</nav>'; }You should see a new menu area called “Enfold Responsive Menu” which when set will replace the responsive menu with a different one.
Regards,
Elliott
- You must be logged in to reply to this topic.