Tom Hemsley – Page 2 – Max Mega 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…

Signify

Posted by Tom Hemsley on January 17, 2022

Remove Residual Styling (Fix Mobile Menu) Copy the template-parts/navigation/navigation-primary.php file from the parent theme to your Child Theme*. Replace the contends of the file with the following:

<?php
/**
 * Primary Menu Template
 *
 * @package Signify Pro
 */

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

<?php

/**

* Primary Menu Template

* @package Signify Pro

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

* Please note, there are many variations of the Signify theme, all released as child themes, you may already have a child…

Blocksy

Posted by Tom Hemsley on June 18, 2021

Using Max Mega Menu on Desktop Under Mega Menu > Menu Locations, enable Max Mega Menu for the “Header Menu 1” location. On the “Display Options” tab, copy the mega menu shortcode ( [maxmegamenu location=menu_1] ). Next, go to Appearance > Customize and open the Blocksy Header Builder. Replace the “Menu 1” block…

Can I activate my licence key on a staging or development site?

Posted by Tom Hemsley on April 21, 2021

This answer is two-fold. You do not need to activate your licence key for the plugin to function. Therefore, you may choose to not activate your licence key on your development site, and only activate it on you live site. Activating the licence key will enable automatic updates. If the…

Moesia

Posted by Tom Hemsley on April 8, 2021

Fix Mobile Menu Due to a CSS conflict, the mobile menu will expand the first level of sub menus by default. To fix the conflict, add the following to your child themes functions.php file: Important: The following is PHP code, making a mistake can cause an error on your site….

Smooth Scroll / One Page Navigation

Posted by Tom Hemsley on December 1, 2020

To enable smooth scrolling to a section of the page when a menu item is clicked, we recommend installing the Page Scroll to ID plugin. To highlight menu items as the page scrolls, go to Mega Menu > Menu Themes > Custom Styling and add the following:

#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link.mPS2id-highlight {
	@include background($menu_item_background_hover_from, $menu_item_background_hover_to);
	color: $menu_item_link_color_hover;
	font-weight: $menu_item_link_weight_hover;
	text-decoration: $menu_item_link_text_decoration_hover;
	border-color: $menu_item_border_color_hover;
}

#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link.mPS2id-highlight {

@include background($menu_item_background_hover_from, $menu_item_background_hover_to);

color: $menu_item_link_color_hover;

font-weight: $menu_item_link_weight_hover;

text-decoration: $menu_item_link_text_decoration_hover;

border-color: $menu_item_border_color_hover;

}

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 );