Freestore

Sub Menus do not display on mobile

Due to a lot of residual styling issues, Max Mega Menu is not compatible with the default slide out menu that comes with Freestore. 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 templates/header/header-layout-standard.php file to your Child Theme.

Find:

<nav id="site-navigation" class="main-navigation <?php echo ( get_theme_mod( 'freestore-nav-styling' ) ) ? sanitize_html_class( get_theme_mod( 'freestore-nav-styling' ) ) : sanitize_html_class( 'freestore-nav-underline' ); ?>" role="navigation">
	<span class="header-menu-button"><i class="fa fa-bars"></i><span><?php echo esc_attr( get_theme_mod( 'freestore-header-menu-text', 'menu' ) ); ?></span></span>
	<div id="main-menu" class="main-menu-container">
		<div class="main-menu-close"><i class="fa fa-angle-right"></i><i class="fa fa-angle-left"></i></div>
		<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
	</div>
</nav><!-- #site-navigation -->

<nav id="site-navigation" class="main-navigation <?php echo ( get_theme_mod( 'freestore-nav-styling' ) ) ? sanitize_html_class( get_theme_mod( 'freestore-nav-styling' ) ) : sanitize_html_class( 'freestore-nav-underline' ); ?>" role="navigation">

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>

</div>

</nav>

Replace with:

<nav id="site-navigation" class="<?php echo ( get_theme_mod( 'freestore-nav-styling' ) ) ? sanitize_html_class( get_theme_mod( 'freestore-nav-styling' ) ) : sanitize_html_class( 'freestore-nav-underline' ); ?>" role="navigation">
	<div id="main-menu" class="main-menu-container">
		<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
	</div>
</nav><!-- #site-navigation -->

<nav id="site-navigation" class="<?php echo ( get_theme_mod( 'freestore-nav-styling' ) ) ? sanitize_html_class( get_theme_mod( 'freestore-nav-styling' ) ) : sanitize_html_class( 'freestore-nav-underline' ); ?>" role="navigation">

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>

</div>

</nav>

Step 2

Go to Mega Menu > Menu Themes. Select the active menu theme and go to the Mobile tab. Set:

Responsive Breakpoint: 980px.

Step 3

Go to Mega Menu > Menu Themes. Select the active menu theme and go to the Styling tab. Add the following:

@include desktop {
    #site-navigation {
        float: right;
    }
}

@include mobile {
    #site-navigation {
         clear: both;
         position: relative;
         height: 40px;
    }
    #main-menu {
         position: absolute;
         left: 0;
         right: 0;
         z-index: 999999;
    }
}

@include desktop {

#site-navigation {

float: right;

}

@include mobile {

#site-navigation {

clear: both;

position: relative;

height: 40px;

}

#main-menu {

position: absolute;

left: 0;

right: 0;

z-index: 999999;

}

Max Mega Menu Documentation

Sub Menus do not display on mobile

Step 1

Step 2

Step 3

Related Articles