Houzez
Removing residual styling
The mobile menu when used with houzez suffers from Residual Styling.
The following instructions will remove the theme mobile toggle button and display the Max Mega Menu in it’s default state on mobiles.
Step 1: Theme setup
Houzez has a non configurable mobile responsive breakpoint of 991px. Therefore, to synchronise the theme with Max Mega Menu, you should go to Mega Menu > Menu Themes > Mobile Menu and set the Responsive Breakpoint to 991px.
The theme reserves a 60px tall space for the mobile menu to sit inside, therefore you should go to Mega Menu > Menu Themes > Mobile Menu and set the Toggle Bar Height to 60px.
Step 2: Fix mobile menu
The mobile menu picks up residual styling from the theme which breaks the display of the sub menu arrow indicators and the sub menu content.
To fix this, copy the inc/header/mobile-header.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 |
<div class="header-mobile houzez-header-mobile <?php echo esc_attr($header_onepage); ?>" data-sticky="<?php echo esc_attr( $mobile_menu_sticky ); ?>"> <div class="container"> <!--start mobile nav--> <div class="mobile-nav"> <span class="nav-trigger"><i class="fa fa-navicon"></i></span> <div class="nav-dropdown main-nav-dropdown"></div> </div> <!--end mobile nav--> <div class="header-logo logo-mobile"> <?php get_template_part('inc/header/logo-mobile'); ?> </div> <?php if( class_exists('Houzez_login_register') ): ?> <?php if( houzez_option('header_login') != 'no' || $create_lisiting_enable != 0 ): ?> <div class="header-user"> <?php get_template_part('inc/header/login-nav', 'mobile'); ?> </div> <?php endif; ?> <?php endif; ?> </div> </div> |
Replace with:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="header-mobile houzez-header-mobile <?php echo esc_attr($header_onepage); ?>" data-sticky="<?php echo esc_attr( $mobile_menu_sticky ); ?>"> <div class=""> <!--start mobile nav--> <div class=""> <div class="main-nav-dropdown"></div> </div> <!--end mobile nav--> <div class="header-logo logo-mobile"> <?php get_template_part('inc/header/logo-mobile'); ?> </div> <?php if( class_exists('Houzez_login_register') ): ?> <?php if( houzez_option('header_login') != 'no' || $create_lisiting_enable != 0 ): ?> <div class="header-user"> <?php get_template_part('inc/header/login-nav', 'mobile'); ?> </div> <?php endif; ?> <?php endif; ?> </div> </div> |