Tom Hemsley – Max Mega Menu

Collapse Sub Menu

Posted by Tom Hemsley on November 27, 2024

An example of collapsed sub menus within a mega menu can be found in the demo menu on the homepage of megamenu.com: To collapse a sub menu within a mega menu, go to Appearance > Menus and open the mega menu settings for the parent item. At the bottom of…

Norebro

Posted by Tom Hemsley on November 26, 2024

Fix Theme Conflicts Copy the /parts/elements/header-menu-nav.php file to your Child Theme. Find:

<nav id="site-navigation" class="main-nav<?php echo esc_attr( $site_navigation_class ); ?>">
	<div class="close">
		<i class="icon ion-android-close"></i>
	</div>
	<div id="mega-menu-wrap">

</div>

Replace with:

<nav id="site-navigation" class="<?php echo esc_attr( $site_navigation_class ); ?>">
	<div>

1 2	<nav id="site-navigation" class="<?php echo esc_attr( $site_navigation_class ); ?>"> <div>

Next go to Appearance > Customize > Additional CSS and add the following:

.mega-menu-primary #hamburger-menu {
	display: none;
}

.mega-menu-primary #hamburger-menu {

display: none;

}

Menu Location Settings

Posted by Tom Hemsley on September 6, 2024

Under Mega Menu > Menu Locations you’ll find configuration options that control the behaviour of each of your menu locations. Click a menu location name to expand the options for that location. You’ll see a green tick next to each location where Max Mega Menu is enabled. General Settings Tab…

Kadence

Posted by Tom Hemsley on April 1, 2024

Fix Mobile Menu The mobile menu will automatically close itself when a top level item is clicked. To fix this, open the Kadence header builder and make the following changes: Next go to Mega Menu > Menu Themes > Mobile Menu.

Hello Elementor

Posted by Tom Hemsley on March 4, 2024

Fix Mobile Menu There is a conflict with the Elementor menu toggle button that causes the mobile menu to hide itself when a user attempts to scroll down the sub menu. To fix this we can hide the Elementor mobile toggle icon and display the Max Mega Menu toggle bar…

Zakra (Free)

Posted by Tom Hemsley on February 20, 2024

This guide is for the Zakra theme hosted on wordpress.org. Fix Mobile Menu Step 1 Copy the template-parts/header/primary-menu/mobile-toggle.php file to your child theme. Find (line 47):

	<nav id="zak-mobile-nav" class="<?php zakra_css_class( 'zakra_mobile_nav_class' ); ?>"

		<?php echo wp_kses_post( apply_filters( 'zakra_nav_data_attrs', '' ) ); ?>>

		<div class="zak-mobile-nav__header">
			<?php if ( get_theme_mod( 'zakra_enable_header_search', true ) ) : ?>
				<?php get_search_form(); // Header search. ?>
			<?php endif; ?>

			<!-- Mobile nav close icon. -->
			<button id="zak-mobile-nav-close" class="zak-mobile-nav-close" aria-label="<?php esc_attr_e( 'Close Button', 'zakra' ); ?>">
				<?php zakra_get_icon( 'x-mark' ); ?>
			</button>
		</div> <!-- /.zak-mobile-nav__header -->

		<?php
		wp_nav_menu(
			array(
				'theme_location' => apply_filters( 'zakra_mobile_menu_location', 'menu-primary' ),
				'menu_id'        => 'zak-mobile-menu',
				'menu_class'     => 'zak-mobile-menu',
				'container'      => '',

				'fallback_cb'    => function() {
					require get_template_directory() . '/inc/class-zakra-walker-page.php';
					$output = '<ul id="zak-mobile-menu" class="zak-mobile-menu">';

					$output .= wp_list_pages(
						array(
							'echo'               => false,
							'title_li'           => false,
							'walker'             => new Zakra_Walker_Page(),
							'has_children_class' => 'menu-item-has-children',
							'current_class'      => 'current-menu-item',
						)
					);

					$output .= '</ul>';

					// @codingStandardsIgnoreStart
					echo $output;
				},

			)
		);
		?>

<nav id="zak-mobile-nav" class="<?php zakra_css_class( 'zakra_mobile_nav_class' ); ?>"

<?php echo wp_kses_post( apply_filters( 'zakra_nav_data_attrs', '' ) ); ?>>

<?php if ( get_theme_mod( 'zakra_enable_header_search', true ) ) : ?>

<?php get_search_form(); // Header search. ?>

<?php endif; ?>

<?php zakra_get_icon( 'x-mark' ); ?>

</button>

</div>

<?php

wp_nav_menu(

array(

'theme_location' => apply_filters( 'zakra_mobile_menu_location', 'menu-primary' ),

'menu_id' => 'zak-mobile-menu',

'menu_class' => 'zak-mobile-menu',

'container' => '',

'fallback_cb' => function() {

require get_template_directory() . '/inc/class-zakra-walker-page.php';

$output = '<ul id="zak-mobile-menu" class="zak-mobile-menu">';

$output .= wp_list_pages(

array(

'echo' => false,

'title_li' => false,

'walker' => new Zakra_Walker_Page(),

'has_children_class' => 'menu-item-has-children',

'current_class' => 'current-menu-item',

)

);

$output .= '</ul>';

// @codingStandardsIgnoreStart

echo $output;

)

);

Replace with:

	<nav>

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

<nav>

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

Step 2 Under Appearance > Menus > Max Mega Menu Settings, set the Effect (Mobile) to “Off Canvas – Slide…

Twenty Twenty Four

Posted by Tom Hemsley on January 31, 2024

Twenty Twenty Three

Posted by Tom Hemsley on January 31, 2024

Equal Column Height / Column Border

Posted by Tom Hemsley on January 24, 2024

To make each column within a megamenu the same height, go to Mega Menu > Menu Themes > Custom Styling and add the following:

#{$wrap} #{$menu} li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu {
	display: flex; /* Make the columns equal height */

	> .mega-menu-column:not(:first-child) {
		border-left: 1px #ccc solid; /* Add a border to the column */
	}
}

#{$wrap} #{$menu} li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu {

display: flex; /* Make the columns equal height */

> .mega-menu-column:not(:first-child) {

border-left: 1px #ccc solid; /* Add a border to the column */

}

Important: The sub menu type must be set to “Mega Menu – Grid Layout”

Block

Posted by Tom Hemsley on October 4, 2023

Max Mega Menu comes with a built in block. This allows easy insertion of menus into your block editor/Gutenberg/full site editing layouts. An example of this can be seen on our Vertical Menu demo page. Step 1: Registering a new menu location First we’ll need to create a new menu…