Max Mega Menu Plugin Tips

I’ll start adding some tips to this page for using the Max Mega Menu Plugin for WordPress. This is a great plugin but here are a few tips to make like a little easier.

Max Mega Menu Drop Down Menu

If the drop-down menu isn’t displaying correctly or is cut off, check header CSS file for overflow hidden. This needs to be removed for the drop down menu to display correctly.

Hide the arrows on the top level Menu

Go to appearance / menus – select the Max Mega Menu – the arrow can then be removed from each parent option on the menu.

Hiding Max Mega Menu on Mobile

Under the theme settings for Mobile Menu, change the responsive breakpoint to Zero, this will hide the menu on mobile devices.

Styling the current selected menu item

By default, the Max Mega Menu plugin uses the hover formatting to style the currently selected item. If you add the following CSS code to the Custom styling panel – Max Mega Menu / Menu Themes / Custom Styling – you can create a new style for the selected menu item. For more information, you can visit the official Max Mega Menu support page here.

#{$wrap} #{$menu} > li.mega-menu-item {
    &.mega-current-menu-item,
    &.mega-current-menu-ancestor,
    &.mega-current-page-ancestor {
         > a.mega-menu-link {
              background: red;
              color: white;
              font-weight: bold;
              text-decoration: underline;
        }
    }
}

Max Mega Menu CSS Styling

Here are some CSS overrides for Max Mega Menu Pro – I’ve not tested these on the regular version.

Changing Font Size of the Max Mega Menu using CSS

To change the font size of the Max Mega Menu using CSS. This is useful for adjusting the font size of the menu in different resolutions. The #topnavHolder is the housing Div I’ve used for the Max Mega Menu widget. If you are using multiple instances of the widget you’ll need to target the specific menu using CSS – in this instance, it’s #maxmegamenu-2.widget.

Top Level Mega Menu

#topnavHolder #maxmegamenu-2.widget li.mega-menu-item a.mega-menu-link {
	font-size: 1.2em;
}

Sub Menu Drop-Downs

#topnavHolder #maxmegamenu-2.widget ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item a.mega-menu-link,
#topnavHolder #maxmegamenu-2.widget ul.mega-sub-menu li.mega-menu-item.mega-menu-item a.mega-menu-link {
    font-size: 1.1em;
}

Showing and Hiding Menu Items using CSS

Depending on the screen size it’s not always possible to show all the Max Mega menu items in a single line. This is where hiding and showing menu items at different screen sizes/resolutions is a lifesaver. The example below shows how to hide the menu item – 7035. The #topnavHolder is the housing Div I’ve used for the Max Mega Menu widget. There is also an example of how to display menu item 7016 using – ‘display: inline-block;’

#topnavHolder #maxmegamenu-2.widget li#mega-menu-item-7035 {
	display: none;
}

#topnavHolder #maxmegamenu-2.widget li#mega-menu-item-7016 {
	display: inline-block;
}