-
AuthorPosts
-
April 25, 2018 at 3:35 pm #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.
April 27, 2018 at 7:25 am #947678Hey 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.
Best regards,
IsmaelApril 27, 2018 at 2:34 pm #947967I 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
April 30, 2018 at 9:00 am #948866Hi,
Best regards,
VictoriaApril 30, 2018 at 2:07 pm #949077This reply has been marked as private.May 2, 2018 at 3:16 pm #950100Hi,
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,
IsmaelMay 2, 2018 at 9:08 pm #950288Thanks much!
May 4, 2018 at 5:10 am #951270 -
AuthorPosts
- You must be logged in to reply to this topic.