Tom Hemsley – Page 3 – Max Mega Menu

Image Swap

Posted by Tom Hemsley on November 23, 2020

The image swap functionality within Max Mega Menu Pro (v2.2+) allows you to place an image within a sub menu, which is updated with a different image as the user hovers over menu items within the same sub menu. There are two stages to setting up the image swap functionality…

Medactive

Posted by Tom Hemsley on October 28, 2020

Mega Menu does not display Medactive and Max Mega Menu conflict because they both use a ‘mega-menu’ class. The ‘mega-menu’ class can be safely removed from Max Mega Menu by adding the following to your child themes functions.php file:

function megamenu_remove_mega_menu_class( $defaults, $menu_id, $current_theme_location ) {
	$menu_class = $defaults['menu_class'];
	$menu_class = str_replace("mega-menu max-mega-menu", "max-mega-menu", $menu_class);
	$defaults['menu_class'] = $menu_class;
	return $defaults;
}
add_filter( "megamenu_nav_menu_args", "megamenu_remove_mega_menu_class", 10, 3 );

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

$menu_class = $defaults['menu_class'];

$menu_class = str_replace("mega-menu max-mega-menu", "max-mega-menu", $menu_class);

$defaults['menu_class'] = $menu_class;

return $defaults;

}

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

Social Now (MyThemeShop)

Posted by Tom Hemsley on October 27, 2020

Fix Mobile Menu If you have Max Mega Menu enabled for the mobile location, you’ll find clicking on parent item links prematurely closes the mobile slideout panel. To fix this, add the following to your child themes functions.php file:

/** Add 'toggle-caret' class to all menu item links to prevent the theme from closing the mobile menu whenever a link is clicked **/
function megamenu_prevent_premature_mobile_menu_close( $atts, $item, $args ) {
	if ( $args->theme_location == 'mobile' ) {
		$atts['class'] = $atts['class'] . " toggle-caret";
	}

	return $atts;
}
add_filter( 'megamenu_nav_menu_link_attributes', 'megamenu_prevent_premature_mobile_menu_close', 10, 3 );

/** Add 'toggle-caret' class to all menu item links to prevent the theme from closing the mobile menu whenever a link is clicked **/

function megamenu_prevent_premature_mobile_menu_close( $atts, $item, $args ) {

if ( $args->theme_location == 'mobile' ) {

$atts['class'] = $atts['class'] . " toggle-caret";

}

return $atts;

}

add_filter( 'megamenu_nav_menu_link_attributes', 'megamenu_prevent_premature_mobile_menu_close', 10, 3 );

Next install the TC Custom JavaScript plugin and add the…

Kalium

Posted by Tom Hemsley on October 14, 2020

The mobile menu The built in Kalium mobile menu overrides certain functionality of Max Mega Menu, therefore it is not possible to use Max Mega Menu for your mobile menu. This is possible by ensuring Max Mega Menu remains disabled for the mobile location: Under Mega Menu > Menu Themes…

YooTheme

Posted by Tom Hemsley on August 28, 2020

YooTheme3 In this example we will replace the theme “Navbar” menu location with Max Mega Menu. To display Max Mega Menu in YooTheme3, first go to Mega Menu > Menu Locations and create a new Menu Location. Name the location “Max Mega Menu Navbar”. Next go to Appearance > Menus….

Zakra

Posted by Tom Hemsley on August 26, 2020

Replace theme mobile menu with Max Mega Menu mobile menu Go to Appearance > Customize > Additional CSS and insert the following:

.mega-menu-menu-primary #site-navigation {
	display: block;
}
.mega-menu-menu-primary #header-action {
	display: none;
}

.mega-menu-menu-primary #site-navigation {

display: block;

}

.mega-menu-menu-primary #header-action {

display: none;

}

Under Mega Menu > Menu Themes > Mobile Menu, make sure the mobile toggle bar is enabled. Under Appearance > Menus > Max Mega Menu Settings, set…

Allow sub menus to remain visible when page background is clicked

Posted by Tom Hemsley on August 17, 2020

By default, when the page background is clicked, any open sub menus will be automatically closed. To prevent this behaviour (and keep sub menus open), add the following to your themes functions.php file:

function megamenu_disable_document_click($attributes, $menu_id, $menu_settings, $settings, $current_theme_location) {
     $attributes['data-document-click'] = 'disabled';
     return $attributes;
}
add_filter('megamenu_wrap_attributes', 'megamenu_disable_document_click', 10, 5);

function megamenu_disable_document_click($attributes, $menu_id, $menu_settings, $settings, $current_theme_location) {

$attributes['data-document-click'] = 'disabled';

return $attributes;

}

add_filter('megamenu_wrap_attributes', 'megamenu_disable_document_click', 10, 5);

MH Magazine

Posted by Tom Hemsley on July 29, 2020

Replace theme mobile menu with Max Mega Menu mobile menu Go to Appearance > Customize > Additional CSS and insert the following:

@media screen and (max-width: 767px) {
    body.mega-menu-main-nav .slicknav_menu,
    body.mega-menu-mh-main-nav .slicknav_menu {
        display: none; 
    }
    body.mega-menu-main-nav .mh-main-nav,
    body.mega-menu-mh-main-nav .mh-main-nav { 
        display: block;
    }
}

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

body.mega-menu-main-nav .slicknav_menu,

body.mega-menu-mh-main-nav .slicknav_menu {

display: none;

}

body.mega-menu-main-nav .mh-main-nav,

body.mega-menu-mh-main-nav .mh-main-nav {

display: block;

}

AdForest

Posted by Tom Hemsley on July 28, 2020

When using AdForest you will find that Max Mega Menu is not correctly applied to the menu. To allow Max Mega Menu to work correctly, copy the template-parts/layouts/main-nav.php file (keeping the directory structure intact) to your Child Theme, and replace the contents of that file with:

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

1 2	<?php wp_nav_menu( array( 'theme_location' => 'main_menu' ) );

THBusiness

Posted by Tom Hemsley on July 8, 2020

Fix Mobile Menu To hide the default 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 992px. Next, go to Mega Menu > Menu Themes > Custom Styling and add the following:…