Tom Hemsley – Max Mega Menu

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…

How do I change the keyboard navigation highlight color?

Posted by Tom Hemsley on October 2, 2023

To change the outline colour of highlighted menu items when using keyboard navigation (from the default blue color), go to Mega Menu > Menu Themes > Custom Styling and add the following:

#{$wrap}.mega-keyboard-navigation {
    .mega-menu-toggle:focus,
    .mega-toggle-block:focus,
    .mega-toggle-block a:focus,
    .mega-toggle-block .mega-search input[type=text]:focus,
    .mega-toggle-block button.mega-toggle-animated:focus,
    #{$menu} a:focus,
    #{$menu} span:focus,
    #{$menu} input:focus,
    #{$menu} li.mega-menu-item a.mega-menu-link:focus {
        outline-color: red;
        outline-offset: -3px;
    }
}

#{$wrap}.mega-keyboard-navigation {

.mega-menu-toggle:focus,

.mega-toggle-block:focus,

.mega-toggle-block a:focus,

.mega-toggle-block .mega-search input[type=text]:focus,

.mega-toggle-block button.mega-toggle-animated:focus,

#{$menu} a:focus,

#{$menu} span:focus,

#{$menu} input:focus,

#{$menu} li.mega-menu-item a.mega-menu-link:focus {

outline-color: red;

outline-offset: -3px;

}

Bard

Posted by Tom Hemsley on November 8, 2022

Fix Double Menu Go to Mega Menu > Menu Locations. Expand the “Main Menu” location and go to the “Advanced” tab. Set the Active Menu Instance to 1. Next go to Mega Menu > Menu Themes > Custom Styling and add the following:

body.mega-menu-main {
    .main-nav-buttons,
    .main-nav-icons,
    .mobile-menu-btn,
    #searchform {
        display: none;
    }
    #main-nav {
        min-height: 0px;
    }
}

body.mega-menu-main {

.main-nav-buttons,

.main-nav-icons,

.mobile-menu-btn,

#searchform {

display: none;

}

#main-nav {

min-height: 0px;

}

Vertical Mega Menu

Posted by Tom Hemsley on September 19, 2022

Vertical Mega Menus can be aligned to the left or right hand side of the page. Creating a Vertical Mega Menu Vertical Menus are set up in exactly the same way as a standard horizontal menu and support all of the same features. To switch your menu from a horizontal…