Tom Hemsley – Page 11 – Max Mega Menu

Independent Publisher

Posted by Tom Hemsley on November 28, 2017

Remove Residual Styling Independent Publisher applies some of it’s own styling to elements within the menu. To stop this from happening, copy the header.php file to your Child Theme. Find:

<nav role="navigation" class="site-navigation main-navigation">

1	<nav role="navigation" class="site-navigation main-navigation">

Replace with:

<nav role="navigation">

1	<nav role="navigation">

Fashiro

Posted by Tom Hemsley on November 25, 2017

Unfortunately Max Mega Menu is not compatible with Fashiro, due to both Fashiro and Max Mega Menu making extensive use of the same CSS class (“.mega-menu”), leading to unresolvable conflicts.

eStore (Theme Grill)

Posted by Tom Hemsley on November 21, 2017

Fix Mobile Menu When Max Mega Menu is enabled you will see 2 mobile toggle buttons on smaller screens. Step 1. Go to Mega Menu > Menu Themes > Mobile Menu and set the Responsive Breakpoint to 768px. This will synchronize the theme mobile display with Max Mega Menu. Step…

Woodmart

Posted by Tom Hemsley on November 19, 2017

Using the Woodmart demo as an example, unfortunately it is not possible to replace the “Browse Categories” menu with Max Mega Menu, due to the way the theme is coded. We do not recommend using Max Mega Menu with the Woodmart theme. Woodmart includes it’s own Mega Menu functionality, documentation…

Responsive Mobile

Posted by Tom Hemsley on November 13, 2017

These instructions are for the “Responsive Mobile” (aka “Responsive II”) theme by CyberChimps. Remove duplicate mobile toggle button Go to Appearance > Customize > Additional CSS and enter the following:

/** Hide mobile items **/
.mega-menu-header-menu #mobile-current-item,
.mega-menu-header-menu #mobile-nav-button {
	display: none !important;
}

/** Remove left and right padding on mobile menu **/
.mega-menu-header-menu #main-menu {
	padding: 0;
}

/** Hide mobile items **/

.mega-menu-header-menu #mobile-current-item,

.mega-menu-header-menu #mobile-nav-button {

display: none !important;

}

/** Remove left and right padding on mobile menu **/

.mega-menu-header-menu #main-menu {

padding: 0;

}

Mega Sub Menu Widths We recommend the following settings to make the mega sub menus span the full width…

Tour Package

Posted by Tom Hemsley on November 10, 2017

Remove Duplicate Main Menu The main menu will be displayed twice on the page when Max Mega Menu is enabled. To fix this, go to Tour Package > Page Style > Additional Style (CSS) and insert the following:

/* Hide duplicate menu */
.mega-menu-main-menu div#main-superfish-wrapper {
    display: none;
}

/* Remove border from top of menu */
.mega-menu-main-menu div.top-navigation-wrapper {
    border: none;
}

/* Remove padding on smaller screens */
.mega-menu-main-menu div.header-wrapper .gdl-navigation-wrapper {
    padding-bottom: 0 !important;
}

/* Hide duplicate menu */

.mega-menu-main-menu div#main-superfish-wrapper {

display: none;

}

/* Remove border from top of menu */

.mega-menu-main-menu div.top-navigation-wrapper {

border: none;

}

/* Remove padding on smaller screens */

.mega-menu-main-menu div.header-wrapper .gdl-navigation-wrapper {

padding-bottom: 0 !important;

}

Hide Logo and make menu full width To hide the theme logo and…

Houzez

Posted by Tom Hemsley on November 10, 2017

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….

Mexin

Posted by Tom Hemsley on November 7, 2017

Fix mobile menu Go to Mega Menu > Menu Themes > Custom Styling and insert the following:

/* Hide duplicate theme mobile toggle button */
.mega-menu-header-menu header #menu-icon {
    display: none !important;
}

/* Fix mobile menu z-index */
.mega-menu-header-menu header #{$wrap} {
	z-index: 99999;
}

/* Hide duplicate theme mobile toggle button */

.mega-menu-header-menu header #menu-icon {

display: none !important;

}

/* Fix mobile menu z-index */

.mega-menu-header-menu header #{$wrap} {

z-index: 99999;

}

Florida

Posted by Tom Hemsley on November 7, 2017

Fix mobile menu Go to Mega Menu > Menu Themes > Custom Styling and insert the following:

/* Hide duplicate theme mobile toggle button */
.mega-menu-header-menu header #menu-icon {
    display: none !important;
}

/* Fix mobile menu z-index */
.mega-menu-header-menu header #{$wrap} {
	z-index: 99999;
}

/* Hide duplicate theme mobile toggle button */

.mega-menu-header-menu header #menu-icon {

display: none !important;

}

/* Fix mobile menu z-index */

.mega-menu-header-menu header #{$wrap} {

z-index: 99999;

}

Makery

Posted by Tom Hemsley on November 6, 2017

Hide the default “select” mobile menu and display the Max Mega Menu mobile menu instead Go to Appearance > Customize > Additional CSS and insert the following:

@media handheld, only screen and (max-width:767px) {
    .mega-menu-main-menu .header-menu {
        display: block;
        float: none;
    }

    .mega-menu-main-menu .select-menu {
        display: none;
    }

    .mega-menu-main-menu .header-search {
        clear: both;
        margin-top: 20px;
    }
}

@media handheld, only screen and (max-width:767px) {

.mega-menu-main-menu .header-menu {

display: block;

float: none;

}

.mega-menu-main-menu .select-menu {

display: none;

}

.mega-menu-main-menu .header-search {

clear: both;

margin-top: 20px;

}