Tom Hemsley – Page 6 – Max Mega Menu

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;

}

Newspaper (tagDiv)

Posted by Tom Hemsley on April 30, 2019

Fix Mobile Menu Go to Appearance > Customize > Additional CSS and enter the following:

@media (max-width: 768px) {
    #mega-menu-wrap-header-menu {
        display: none;
    }
    #td-mobile-nav #mega-menu-wrap-header-menu {
        display: block;
    }
}

@media (max-width: 768px) {

#mega-menu-wrap-header-menu {

display: none;

}

#td-mobile-nav #mega-menu-wrap-header-menu {

display: block;

}

Then go to Mega Menu > Menu Themes > Mobile Menu and apply the following settings: Disable Mobile Toggle: On

Mai Lifestyle Pro

Posted by Tom Hemsley on April 26, 2019

Fix Mobile Menu Go to Appearance > Customize > Additional CSS and enter the following:

.mega-menu-header-right .mai-toggle {
    display: none;
}
.mega-menu-header-right .header-right {
    display: block;
}

.mega-menu-header-right .mai-toggle {

display: none;

}

.mega-menu-header-right .header-right {

display: block;

}

Then go to Mega Menu > Menu Themes > Mobile Menu and apply the following settings: Sub Menu – Force Width: On Sub Menu – Overlay Content: On Disable Mobile Toggle: Off