Navigation

Skip to main content
What can I help you find?
< Back

Navigation

Posted
Updated
Bygccdev

Pro Tip: We are not using the native WP Navigation blocks. Instead, we will be using the Max Mega Menu plugin. Plugin Demo & Documentation

Main Menu

Editing the Menu

To edit the links in the Main Menu, visit Appearance > Menus.

There should be a main menu for you to edit already. This will work similar to how the old style WP menus worked.

Styling the Menu

To access the style options for the menu, visit Mega Menu > Menu Themes.

Be sure the selected theme to edit is IDv2 Theme (Main Menu) or Main Menu Theme in IDv3 in the dropdown. Any edits made to the Default theme will be lost when the plugin updates.

Before we dive in, let’s talk about what you’ll find in each area here

General Settings

The items of interest here are

  1. Arrow – you can select from 4 styles of dropdown indicator
  2. Shadow (optional) – add shadow to dropdowns
  3. Keyboard Highlight Outline (optional) – sets the outline style for accessible keyboard navigation. Can be left as is, or changed to match theme. If changed, it should stand out.
  4. Hover Transitions – I suggest enabling this

The other items are likely fine as is and can be left alone.

Be sure to click the blue Save Changes button at the bottom.

Menu Bar

Now, we’ll get a little deeper into the style settings. The Menu Bar tab refers to the menu bar on desktop.

Let’s look at each of the settings here.

  • Menu Height – Define the height of each top level menu item link. This value plus the Menu Padding (top and bottom) settings define the overall height of the menu bar. In most cases 40px is sufficient and this can be left as is. I don’t recommend going smaller because Google complains if the clickable area is too small.
  • Menu Background – The background color for the main menu bar. In most cases, you’ll want this to be transparent.
  • Menu Padding – Padding for the menu bar. This is padding around the menu bar, not on menu items. In most cases, you’ll want this to be all zeros.
  • Menu Border Radius – Set a border radius on the menu bar. In most cases, this will also be all zeros.

Top Level Menu Items

  • Menu Items Align – Align all menu items to the left (default), centrally or to the right.
  • Item Font – The font to use for each top level menu item. Select color, size, family, transform, weight, decoration and align.
  • Item Font (Hover) – set color, weight and decoration for hover state.
  • Item Background – The background color for each top level menu item. In most cases, this will be transparent.
  • Item Background (Hover) – You can select a color here if you want the top level menu items to have a background color on hover.
  • Item Spacing – Define the size of the gap between each top level menu item.
  • Item Padding – Set the padding for each top level menu item.
  • Item Border – Set the border to display on each top level menu item. This is a stylistic choice and optional.
  • Item Border Radius – if above not used, this is not needed.
  • Item Divider – Show a small divider bar between each menu item.
  • Highlight Current Item – Apply the ‘hover’ styling to current menu items. Applies to top level menu items only. Uncheck to disable.

Be sure to click the blue Save Changes button at the bottom.

Mega Menus

This panel contains the style settings for the mega dropdowns.

  • Panel Background – Set a background color for a whole mega dropdown.
  • Panel Width – Mega Panel width. For a full width panel enter body into the outer width field. Then to align content with the page content enter header > div > div into the inner width field. If full-width content is desired, enter 100% instead.
  • Panel Padding – Set a background color for a whole mega dropdown. You’ll likely want to set some padding here to avoid content hitting the edge of the panel.
  • Panel Border – Set the border to display on the sub menu. This is a stylistic choice and optional.
  • Panel Border Radius – Set rounded corners for the sub menu. This is a stylistic choice and optional.
  • Column Padding – Use this to define the amount of space around each widget / set of menu items within the sub menu. You’ll likely want to set some padding here to avoid content running together.

Widgets

  • Title Font – Set the font to use Widget headers in the mega menu.
  • Title Padding – Set the padding for the widget headings.
  • Title Margin – Set the margin for the widget headings.
  • Title Border – Set the border for the widget headings.
  • Content Font – Set the font to use for panel contents.

Second Level Menu Items

If your menu doesn’t have second level links you can skip this section.

  • Item Font – Set the font for second level menu items when they’re displayed in a Mega Menu.
  • Item Font (Hover) – Set the font style on hover.
  • Item Background (Hover) – Set the background hover color for second level menu items.
  • Item Padding – Set the padding for the second level menu items.
  • Item Margin – Set the margin for the second level menu items.
  • Item Border – Set the border for the second level menu items.

Third Level Menu Items

If your menu doesn’t have third level links you can skip this section.

  • Item Font – Set the font for second level menu items when they’re displayed in a Mega Menu.
  • Item Font (Hover) – Set the font style on hover.
  • Item Background (Hover) – Set the background hover color for second level menu items.
  • Item Padding – Set the padding for the second level menu items.
  • Item Margin – Set the margin for the second level menu items.
  • Item Border – Set the border for the second level menu items.

Be sure to click the blue Save Changes button at the bottom.

Flyout Menus

This panel contains the style settings for the standard dropdowns/flyouts.

  • Sub Menu Background – Set the background color for the dropdown/flyout menu.
  • Sub Menu Width – The width of each flyout menu. This must be a fixed pixel value.
  • Sub Menu Padding – Set the padding for the whole flyout menu. This will likely always be all zeros.
  • Sub Menu Border – Set the border for the flyout menu. This is a stylistic choice and optional.
  • Sub Menu Border Radius – Set rounded corners for flyout menus. This is a stylistic choice and optional.
  • Menu Item Background – Set the background color for a flyout menu item. Will likely be transparent.
  • Menu Item Background (Hover) – Set the background color for a flyout menu item (on hover).
  • Menu Item Height – The height of each flyout menu item
  • Menu Item Padding – Set the padding for each flyout menu item.
  • Menu Item Font – Set the font for the flyout menu items.
  • Menu Item Font (Hover) – Set the font for the flyout menu items.
  • Menu Item Divider – Show a line divider below each menu item. Optional.

Be sure to click the blue Save Changes button at the bottom.

Mobile Menu

This panel contains the style settings for the mobile menu.

  • Responsive Breakpoint – The menu will be converted to a mobile menu when the browser width is below this value. Set to zero to disable mobile menu.

Mobile Toggle Bar

  • Toggle Bar Designer – Configure the contents of the mobile toggle bar. In most cases, you’ll leave this as is, except for the color. Click the Toggle button to select the color and size of the hamburger bars.
  • Toggle Bar Background – Set the background color for the mobile menu toggle bar.
  • Toggle Bar Height – Set the height of the mobile menu toggle bar.
  • Toggle Bar Border Radius – Set a border radius on the mobile toggle bar.
  • Disable Mobile Toggle Bar – Hide the toggle bar and display the menu in it’s open state by default. This is rare.

Mobile Sub Menu

  • Overlay Content – If enabled, the mobile sub menu will overlay the page content (instead of pushing the page content down). You’ll want to check this if you are not using an off-canvas menu *
  • Force Full Width – If enabled, the mobile sub menu will match the width and position on the given page element (rather than being limited to the width of the toggle bar). For a full width sub menu, leave the ‘Selector’ value set to ‘body’. You’ll want to check this if you are not using an off-canvas menu *
  • Off Canvas Width – The width of the sub menu if the Mobile Effect is set to ‘Slide Left’ or ‘Slide Right’. Must be specified in px.
  • Menu Item Height – Height of each top level item in the mobile menu.
  • Menu Padding – Padding for the mobile sub menu.
  • Menu Background – The background color for the mobile menu.
  • Menu Item Background (Active) – The background color for each top level menu item in the mobile menu when the sub menu is open.
  • Font – The font to use for each top level menu item in the mobile menu.
  • Font (Active) – The font color for each top level menu item in the mobile menu when the sub menu is open.

Mega Menus

  • Mega Menu Columns – Collapse mega menu content into this many columns on mobile. This will likely always be 1 on mobile.

Be sure to click the blue Save Changes button at the bottom.

Custom Styling

This is an area to enter custom CSS for the menu styling. You’ll likely never touch this.

* Advanced topics that require additional training.

Table of Contents