How to highlight active menu items

Demo: see the top menu on this site. You will notice the ‘Documentation’ item is (subtly) highlighted.

Applying the hover styling to active top level menu items

To apply the hover style to active / current top level menu items, go to Mega Menu > Menu Themes > Menu Bar and enable the ‘Highlight Current Item’ option.

Highlighting sub menu items can be unreliable, so this option will only apply to the top level menu items. However, there is custom CSS below if you would like to try highlighting sub menu menu items.

Applying the hover styling to active sub menu items

There is no built in option to highlight active sub menu items as it can be unreliable. If you have 2 menu items pointing to the same page, each in different sub menus, both menu items will become highlighted.

To apply the hover styling to active sub menu items, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

Applying Custom Styling to active top level menu items

If you want to apply “active” styling which is different to the “hover” styling, go to Mega Menu > Menu Themes. Set the “Hover” settings to how you’d like the menu items to appear on hover, then insert the following into the Custom Styling area to set a different “Active” color.

Related Articles