Tom Hemsley – Page 4 – Max Mega Menu

ListingPro

Posted by Tom Hemsley on July 1, 2020

Fix Mobile Menu To hide the default ListingPro mobile menu, and show the Max Mega Menu mobile menu instead, go to Mega Menu > Menu Themes > Mobile Menu and set the Responsive Breakpoint to 980px. Next, go to Mega Menu > Menu Themes > Custom Styling and add the…

Stockie

Posted by Tom Hemsley on June 30, 2020

Theme Setup Make sure the Extended Menu in the theme settings is set to ‘Choose menu’: Fix Icon Styling Go to Mega Menu > Menu Themes > Custom Styling and add the following:

#{$wrap} #{$menu} a:before {
	bottom: auto;
	left: auto;
	opacity: 1;
}
#{$wrap} #{$menu} a:not([class^='dashicons']):not([class^='fa']):not([class^='custom']):not([class^='genericon']):before {
	content: normal;
}

#{$wrap} #{$menu} a:before {

bottom: auto;

left: auto;

opacity: 1;

}

#{$wrap} #{$menu} a:not([class^='dashicons']):not([class^='fa']):not([class^='custom']):not([class^='genericon']):before {

content: normal;

}

Full Width Sub Menus To make the mega sub menus span the width of the header, go…

Rehub

Posted by Tom Hemsley on June 23, 2020

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

.mega-menu-primary-menu .responsive_nav_wrap {
    display: none;
}

.mega-menu-primary-menu .responsive_nav_wrap {

display: none;

}

Use ‘nav’ element as the menu container

Posted by Tom Hemsley on June 13, 2020

Add the following code to your themes functions.php page to change the <div> element to a <nav> element for your menus.

function megamenu_use_nav_container( $defaults, $menu_id, $current_theme_location ) {
	$defaults['container'] = 'nav';
	return $defaults;
}
add_filter( "megamenu_nav_menu_args", "megamenu_use_nav_container", 10, 3 );

function megamenu_use_nav_container( $defaults, $menu_id, $current_theme_location ) {

$defaults['container'] = 'nav';

return $defaults;

}

add_filter( "megamenu_nav_menu_args", "megamenu_use_nav_container", 10, 3 );

Kingster (GoodLayers)

Posted by Tom Hemsley on June 9, 2020

Fix Grid Layout Install the “TC Custom JavsScript” plugin, then go to Appearance > Custom JavaScript and enter the following:

jQuery(window).load(function() {
    jQuery('.kingster-main-menu').superfish('destroy');
});

jQuery(window).load(function() {

jQuery('.kingster-main-menu').superfish('destroy');

});

Hotel Master (GoodLayers)

Posted by Tom Hemsley on June 2, 2020

Fix Grid Layout Install the “TC Custom JavsScript” plugin, then go to Appearance > Custom JavaScript and enter the following:

jQuery(window).load(function() {
    jQuery('#gdlr-main-navigation').superfish('destroy');
});

jQuery(window).load(function() {

jQuery('#gdlr-main-navigation').superfish('destroy');

});

GeneratePress

Posted by Tom Hemsley on May 15, 2020

We find Max Mega Menu works well with GeneratePress “out of the box”. However, if you are experiencing issues with residual styling, please follow the steps below. Fix Residual Theme Styling First create and activate a Child Theme. In the child theme functions.php file, add the following:

function megamenu_remove_main_navigation_class( $classes ) {
	$new_classes = array();

	foreach ($classes as $class) {
		if ($class != 'main-navigation') {
			$new_classes[] = $class;
		}
	}

	return $new_classes;
}
add_filter("generate_navigation_class", "megamenu_remove_main_navigation_class", 11);

function megamenu_remove_main_navigation_class( $classes ) {

$new_classes = array();

foreach ($classes as $class) {

if ($class != 'main-navigation') {

$new_classes[] = $class;

}

return $new_classes;

}

add_filter("generate_navigation_class", "megamenu_remove_main_navigation_class", 11);

Applying a…

StoreVilla

Posted by Tom Hemsley on May 15, 2020

Fix Residual Theme Styling Residual theme styling will affect the mobile menu, making it impossible to open/close on some screen widths, and inheriting font colours from the theme stylesheet. To fix these issues, first create and activate a Child Theme. In the child theme functions.php file, add the following:

function storevilla_primary_navigation() {
	?>
	<nav id="site-navigation">
		<div class="store-container clearfix">
			<?php
				wp_nav_menu(
					array(
						'theme_location' => 'storevillaprimary'
					)
				);
			?>
		</div>
	</nav><!-- #site-navigation -->
	<?php
}

function storevilla_primary_navigation() {

<?php

wp_nav_menu(

array(

'theme_location' => 'storevillaprimary'

)

);

</div>

</nav>

<?php

}

…

Charitas Lite

Posted by Tom Hemsley on May 4, 2020

Menu Theme Setup Go to Mega Menu > Menu Themes. Set the following: Mobile Menu > Responsive Breakpoint: 768px Fix Mobile Menu Go to Appearance > Customize > Additional CSS and enter the following:

@media (max-width: 768px) {
	.mega-menu-primary .mean-container {
		display: none !important;
	}
	.mega-menu-primary .site-navigation {
		display: block !important;
	}
	.mega-menu-primary #sticky_navigation .grid_11 {
		width: 100%;
	}
}

@media (max-width: 768px) {

.mega-menu-primary .mean-container {

display: none !important;

}

.mega-menu-primary .site-navigation {

display: block !important;

}

.mega-menu-primary #sticky_navigation .grid_11 {

width: 100%;

}

Visual Composer

Posted by Tom Hemsley on April 28, 2020

To display Max Mega Menu within a page built using Visual Composer, make sure you use a “WordPress Custom Widget” element (rather than the default menu element), and add a “Max Mega Menu” widget to your page. Please see the Visual Composer documentation on displaying WordPress Custom Widgets.