Tom Hemsley – Page 6 – Max Mega Menu

Mobile Menu

Posted by Tom Hemsley on September 19, 2019

The Responsive Breakpoint Your mega menu will automatically collapse down to a mobile style menu on smaller screens. To test the mobile menu simply reduce the width of your browser window. You can adjust the screen width at which the menu converts to a mobile style using the Responsive Breakpoint…

Airi

Posted by Tom Hemsley on September 2, 2019

Fix Mobile Menu Airi automatically closes the mobile sub menu when any of the links are clicked, and also adds an extra sub menu toggle icon. To fix both of these issues, install the TC Custom JavaScript plugin then go to Appearance > Custom JavaScript and add the following:

jQuery(document).ready(function($){
  jQuery('body.mega-menu-menu-1 #site-navigation').unbind();
  jQuery("body.mega-menu-menu-1 .header-search-cart").remove();
  jQuery("body.mega-menu-menu-1 .header-mobile-menu").remove();
  jQuery("body.mega-menu-menu-1 #mega-menu-wrap-menu-1 .subnav-toggle").remove();
  jQuery("body.mega-menu-menu-1 .main-navigation").removeClass('main-navigation');
});

jQuery(document).ready(function($){

jQuery('body.mega-menu-menu-1 #site-navigation').unbind();

jQuery("body.mega-menu-menu-1 .header-search-cart").remove();

jQuery("body.mega-menu-menu-1 .header-mobile-menu").remove();

jQuery("body.mega-menu-menu-1 #mega-menu-wrap-menu-1 .subnav-toggle").remove();

jQuery("body.mega-menu-menu-1 .main-navigation").removeClass('main-navigation');

});

…

Apply custom styling to fourth level items

Posted by Tom Hemsley on August 29, 2019

The Theme Editor in Max Mega Menu will let you apply styling to the First, Second and Third level items within your menu. The Fourth level items will inherit the Third level styling. To style the Fourth level items, go to Mega Menu > Menu Themes > Custom Styling and…

Mann

Posted by Tom Hemsley on June 18, 2019

To restore the Max Mega Menu mobile toggle bar, go to Mega Menu > Menu Themes > Custom Styling and add the following:

@media (max-width: 1030px) {
    .responsive-layout header.main-header.layout-single-row .first-row {
        display: none;
    }
    .responsive-layout #main-menu>.mega-menu-wrap>.mega-menu-toggle {
        display: flex !important;
    }
}

@media (max-width: 1030px) {

.responsive-layout header.main-header.layout-single-row .first-row {

display: none;

}

.responsive-layout #main-menu>.mega-menu-wrap>.mega-menu-toggle {

display: flex !important;

}

Philos

Posted by Tom Hemsley on June 18, 2019

The authors of Philos have added custom JavaScript that directly targets Max Mega Menu and breaks the sub menu HTML. Therefore, we do not support this theme. Any issues should be reported directly to the theme authors.

Hestia

Posted by Tom Hemsley on June 11, 2019

Hestia comes with a built in Max Mega Menu theme, so the first step is to go to Appearance > Menus > Max Mega Menu Settings and set the Theme to “Hestia”. If you want to use the default Max Mega Menu theme instead, make sure you have set the…

Customify

Posted by Tom Hemsley on May 24, 2019

Basic Menu Theme Setup Go to Mega Menu > Menu Themes and apply the following: Mega Menu > Panel Width (Outer): .customify-container > div Mobile Menu > Responsive Breakpoint: 1024px

Prospect

Posted by Tom Hemsley on May 22, 2019

Fix Mobile Menu Go to Appearance > Customize > Addtional CSS and add the following:

body.mega-menu-primary.cws_mobile #site_header {
	display: block;
}
body.mega-menu-primary.cws_mobile #mobile_header {
	display: none;
}

body.mega-menu-primary.cws_mobile #site_header {

display: block;

}

body.mega-menu-primary.cws_mobile #mobile_header {

display: none;

}

Next, go to Mega Menu > Menu Themes > Mobile Menu and apply the following settings: Toggle Bar Height: 103px Toggle Bar Background: Transparent Sub Menu – Force Full Width: On

EasyMag

Posted by Tom Hemsley on May 22, 2019

Fix Mobile Menu Go to Appearance > Customize > Addtional CSS and add the following:

.mega-menu-primary .dt-main-menu {
	display: block;
}
.mega-menu-primary .dt-main-menu-md {
	display: none;
}

.mega-menu-primary .dt-main-menu {

display: block;

}

.mega-menu-primary .dt-main-menu-md {

display: none;

}

EasyMag uses a fixed/sticky header on mobile, which makes it impossible to scroll down the contents of the mobile menu. To work around this, add a scrollbar to the mobile menu.

Prevalent

Posted by Tom Hemsley on May 7, 2019

Remove Residual Styling Copy the header.php to your Child Theme. Find:

             <div class="toggle">
                <a class="toggleMenu" href="#"><?php _e('Menu','prevalent'); ?></a>
             </div><!-- toggle --> 
            
            <div class="sitenav">
                    <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
            </div><!-- site-nav -->

</div>

<?php wp_nav_menu(array('theme_location' => 'primary')); ?>

</div>

Replace with:

            <div class="sitenav-mmm">
                    <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
            </div><!-- site-nav -->

<?php wp_nav_menu(array('theme_location' => 'primary')); ?>

</div>

Next, go to Appearance > Customize > Additional CSS and add the following:

@media screen and (min-width: 980px) {
    .sitenav-mmm {
        float: right;
    }
}

@media screen and (min-width: 980px) {

.sitenav-mmm {

float: right;

}