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

    After updating to 4.2.6 my mobile menu is not displaying on mobile devices. It is only showing the main menu. I have a mobile menu created in the Menus option in the backend.
    Thanks
    _________________________________________________
    Follow-up 1.
    I have Enfold running on localhost with no child theme or custom CSS and the issue is still present. It appears that the designated mobile menu is disregarded – on mobile the secondary menu is now at the top and the mobile menu icon is displayed showing the main menu. This was not the case before and not desired
    ______________________________________

    Follow-up 2.
    The responsive menu tick box in the menu options which allows you to select a menu for mobile is missing from your latest update. I had code in my child theme that allowed one to select a menu for mobile and it worked (this was supplied by you guys at some point)- either way, this is still disregarded with the latest theme updates.

    avia_nav_menus(); function avia_nav_menus() { 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 here)</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) { $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() { 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>’; }

    • This topic was modified 6 years, 7 months ago by xyzb.
    #947678

    Hey xyzb,

    Thank you for using Enfold.

    I’m sorry but that implementation is not going to work anymore because the mobile menu is now rendered dynamically with a script. The mobile menu items are now separated from the actual desktop menu items. You may need to set a custom css class attribute for the menu items and then use css media queries to toggle their visibility on different devices. You can find an example of that in the following thread.

    // https://kriesi.at/support/topic/change-breakpoint-of-mobile-menu-and-display-a-different-menu-at-mobile/

    Best regards,
    Ismael

    #947967

    I don’t understand why the developers did this. Allowing to create a dedicated mobile menu was awesome. Could you provide the CSS to hide the secondary menu on mobile(phones) and then I will need to add code to add those items to the main menu. I don’t like the new change, wondering why this was done????

    Thanks

    #948866

    Hi,

    Best regards,
    Victoria

    #949077
    This reply has been marked as private.
    #950100

    Hi,

    This was done to improve and extend the mobile menu options. It’s been part of the theme since version 4.1 if I am not mistaken. Having a separate mobile menu container makes it much more easier to implement dedicated styles and scripts for it.

    Add the following css codes.

    @media only screen and (max-width: 989px) {
    .only_desktop { display: none !important; }}
    
    @media only screen and (min-width: 990px) {
    .only_mobile { display: none !important; }}

    Apply the “only_mobile” css class attribute to the mobile menu items and “only_desktop” to the desktop items.

    Best regards,
    Ismael

    #950288

    Thanks much!

    #951270

    Hi,

    Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.