Shopstar
Fix Mobile Menu
Due to a lot of residual styling issues, Max Mega Menu is not compatible with the default slide out menu that comes with Shopstar. The only way to get the mobile menu working correctly again is to disable the slide out menu and display the standard Max Mega Menu mobile menu instead.
Step 1
Copy the library/template-parts/header-centered.php file to your Child Theme.
Find:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<nav id="site-navigation" class="main-navigation <?php echo ( !is_front_page() || ( get_theme_mod( 'shopstar-slider-type', customizer_library_get_default( 'shopstar-slider-type' ) ) == 'shopstar-no-slider' && !get_header_image() ) ) ? 'bottom-border mobile' : 'bottom-border'; ?>" role="navigation"> <span class="menu-toggle"> <i class="otb-fa otb-fa-bars"></i> </span> <div id="main-menu" class="container shopstar-mobile-menu-primary-color-scheme <?php echo ( !is_front_page() || ( get_theme_mod( 'shopstar-slider-type', customizer_library_get_default( 'shopstar-slider-type' ) ) == 'shopstar-no-slider' && !get_header_image() ) ) ? 'bottom-border' : ''; ?>"> <div class="padder"> <div class="close-button"><i class="otb-fa otb-fa-angle-right"></i><i class="otb-fa otb-fa-angle-left"></i></div> <div class="main-navigation-inner"> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </div> <?php if( get_theme_mod( 'shopstar-header-search', customizer_library_get_default( 'shopstar-header-search' ) ) ) : ?> <span class="search-button"> <a href=""><?php echo __( 'Search', 'shopstar' ); ?> <i class="otb-fa otb-fa-search search-btn"></i></a> </span> <?php endif; ?> <div class="search-slidedown"> <div class="container"> <div class="padder"> <div class="search-block"> <?php if( get_theme_mod( 'shopstar-header-search', customizer_library_get_default( 'shopstar-header-search' ) ) ) : ?> <?php get_search_form(); ?> <?php endif; ?> </div> </div> </div> </div> </div> </div> </nav><!-- #site-navigation --> |
Replace with (double check the code you have pasted is exactly as it is below before saving):
|
1 2 3 4 5 6 7 |
<nav class="<?php echo ( !is_front_page() || ( get_theme_mod( 'shopstar-slider-type', customizer_library_get_default( 'shopstar-slider-type' ) ) == 'shopstar-no-slider' && !get_header_image() ) ) ? 'bottom-border mobile' : 'bottom-border'; ?>" role="navigation"> <div class="container shopstar-mobile-menu-primary-color-scheme <?php echo ( !is_front_page() || ( get_theme_mod( 'shopstar-slider-type', customizer_library_get_default( 'shopstar-slider-type' ) ) == 'shopstar-no-slider' && !get_header_image() ) ) ? 'bottom-border' : ''; ?>"> <div class="padder"> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </div> </div> </nav><!-- #site-navigation --> |
Step 2
The change made in step 1 will remove the search option from your header. You can re-add a search item to the menu using this guide.
The change made is step 1 will cause the menu to span the full width of the page. To re-center your menu items, see this page.