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 menu items, go to Mega Menu > Menu Themes 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 Custom Styling to active top level menu items

If you want to apply styling other than the hover styling, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

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:

Related Articles