Tom Hemsley – Page 11 – Max Mega Menu

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;

}

Creator World

Posted by Tom Hemsley on October 24, 2017

Creator World has it’s own JavaScript functionality for the main menu which will continue to be applied to Max Mega Menu once it’s enabled. Restore hover functionality and remove duplicate mobile toggle button Copy the header.php file to your Child Theme. Find:

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

<?php _e('Menu','creator-world'); ?>

</a> </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>

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

</div>

Using Ajax Search Lite/Pro with Max Mega Menu

Posted by Tom Hemsley on October 20, 2017

AJAX Search Lite / Pro is a live search plugin for WordPress. Using the “Replacements” functionality in Max Mega Menu Pro it is possible to display the search bar directly within the menu. Step 1: Ajax Search Setup Make sure the “Search box width” is set to a fixed width…