Duplicated Mobile Nav Issue (code attached)
-
Thank you in advance for helping. Here’s the latest bug with a commercial theme:
The following code seems to be creating duplicate un-ordered lists in the theme’s mobile menu that are stacked one on top of each other identically. It’s as if there is some logic in the code that is causing this. I don’t even have the mobile menu selected under menu locations and duplicate menus show up on mobile devices. In fact, if I activate a footer menu for a footer menu location defined by the theme it will get appended to the mobile menu. In other words, if the menu exists and is selected for another location it will be appended to the mobile menu. In some cases if a menu exists without being selected, the mobile nav will pick it up and also append it to the un-ordered list for the mobile nav despite non-selection in WordPress menus. I have traced the population of the page code from the following php code in the theme developer’s custom directory structure:
<?php /** * The template for displaying mobile menu * * @package WordPress * @subpackage Mango * @since Mango 1.0 */ ?> <?php global $mobile_menu,$mango_settings; $mobile_menu = false; if(has_nav_menu('mobile_menu')){ $menu_location = 'mobile_menu'; $mobile_menu = true; } elseif(has_nav_menu('main_menu')){ $menu_location = 'main_menu'; $mobile_menu = true; } if(has_nav_menu('primary_menu')){ $menu_location_pre = 'primary_menu'; $mobile_menu = true; } ?> <?php if ( $mobile_menu ) { ?> <div id="mobile-menu"> <div id="mobile-menu-wrapper"> <header> <?php _e("Navigation",'mango') ?> <a href="#" id="mobile-menu-close" title="Close Panel"></a> </header> <?php wp_nav_menu ( array ( 'theme_location' => $menu_location, 'menu_class' => 'mobile-menu', 'container' ) ); ?> => 'nav', 'walker' => new mango_top_navwalker_mobile <?php if($mango_settings['mango_site_header'] ==22){ wp_nav_menu ( array ( ) ); } ?> <footer> <?php get_template_part("inc/social-icons"); ?> <p class="copyright"><?php echo htmlspecialchars_decode(esc_textarea($mango_settings['mango_copyright'])) ?></p> </footer> </div> <div id="mobile-menu-overlay"></div> </div> <?php } ?> 'theme_location' => $menu_location_pre, 'menu_class' => 'mobile-menu', 'container' => 'nav', 'walker' => new mango_top_navwalker_mobile ) ); } ?> <footer> <?php get_template_part("inc/social-icons"); ?> <p class="copyright"><?php echo htmlspecialchars_decode(esc_textarea($mango_settings['mango_copyright'])) ?></p> </footer> </div> <div id="mobile-menu-overlay"></div> </div> <?php } ?>I already had to modify the theme’s style.css to eliminate a no reason bunch copyright text at the bottom of the mobile menu by using the display: none; property selector. I would like to clean up remove the offending code as well but now the priority is the duplicate lists in the mobile navigation menu.
The following code output is the result of the above php on the requested page:
<div id="mobile-menu" class="opened"> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 648px;"><div id="mobile-menu-wrapper" style="overflow: hidden; width: auto; height: 648px;"> <header> Navigation <a href="#" id="mobile-menu-close" title="Close Panel"></a> </header> <nav class="menu-amenu-main-navigation-container"><ul id="menu-amenu-main-navigation" class="mobile-menu"><li id="menu-item-8326" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8060 current_page_item"><a href="https://somecontent.com/">Home</a></li><li id="menu-item-8327" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://somecontent.com/">somecontent™</a></li><li id="menu-item-8328" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://somecontent.com/">somecontent</a></li><li id="menu-item-8329" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://somecontent.com/">somecontent</a></li></ul></nav> <nav class="menu-amenu-main-navigation-container"><ul id="menu-amenu-main-navigation-1" class="mobile-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8060 current_page_item"><a href="https://somecontent.com/">Home</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://somecontent.com/">"somecontent™</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://somecontent.com/">somecontent</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://somecontent.com/">somecontent</a></li></ul></nav> <footer> <div class="social-icons"> <a class="social-icon icon-facebook" href="https://www.facebook.com/somecontent" target="_blank"> <i class="fa fa-facebook"></i></a> </div> <p class="somecontent">somecontent copyright text</p> </footer> </div><div class="slimScrollBar" style="width: 4px; position: absolute; top: 0px; opacity: 0.2; display: none; border-radius: 7px; z-index: 99; right: 2px; height: 648px; background: rgb(255, 255, 255);"></div><div class="slimScrollRail" style="width: 4px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 2px; background: rgb(51, 51, 51);"></div></div> <div id="mobile-menu-overlay"></div> </div>I’d appreciate any direction on this.
The topic ‘Duplicated Mobile Nav Issue (code attached)’ is closed to new replies.