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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* Apply Hover Styling to active Mega Menu - Second Level Links */ #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link { color: $panel_second_level_font_color_hover; font-weight: $panel_second_level_font_weight_hover; text-decoration: $panel_second_level_text_decoration_hover; @include background($panel_second_level_background_hover_from, $panel_second_level_background_hover_to); } /* Apply Hover Styling to active Mega Menu - Third Level Links */ #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item.mega-current-menu-item > a.mega-menu-link { color: $panel_third_level_font_color_hover; font-weight: $panel_third_level_font_weight_hover; text-decoration: $panel_third_level_text_decoration_hover; @include background($panel_third_level_background_hover_from, $panel_third_level_background_hover_to); } /* Apply Hover Styling to active Flyout Links and ancestors */ #{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link { @include background($flyout_background_hover_from, $flyout_background_hover_to); font-weight: $flyout_link_weight_hover; text-decoration: $flyout_link_text_decoration_hover; color: $flyout_link_color_hover; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#{$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; } } } |
Removing the highlight from an active menu item
To prevent a menu item from ever being highlighted, give the menu item a custom class of ‘never-highlight’.