{"id":24987,"date":"2016-09-06T22:28:31","date_gmt":"2016-09-06T21:28:31","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/how-to-equally-distribute-menu-items-in-the-menu-bar-copy\/"},"modified":"2020-11-25T09:47:48","modified_gmt":"2020-11-25T09:47:48","slug":"highlight-active-menu-items","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/highlight-active-menu-items\/","title":{"rendered":"How to highlight active menu items"},"content":{"rendered":"

Demo: see the top menu on this site. You will notice the ‘Documentation’ item is (subtly) highlighted.<\/p>\n

Applying the hover styling to active top level menu items<\/h3>\n

To apply the hover style to active \/ current top level<\/strong> menu items, go to Mega Menu > Menu Themes > Menu Bar<\/em>\u00a0and enable the ‘Highlight Current Item’ option.<\/p>\n

\"\"<\/a><\/p>\n

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.<\/p>\n

Applying the hover styling to active sub menu items<\/h3>\n

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.<\/p>\n

To apply the hover styling to active sub menu<\/strong> items, go to Mega Menu > Menu Themes<\/em> and insert the following into the Custom Styling area:<\/p>\n

\/* Apply Hover Styling to active Mega Menu - Second Level Links *\/\r\n#{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,\r\n#{$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 {\r\n    color: $panel_second_level_font_color_hover;\r\n    font-weight: $panel_second_level_font_weight_hover;\r\n    text-decoration: $panel_second_level_text_decoration_hover;\r\n    @include background($panel_second_level_background_hover_from, $panel_second_level_background_hover_to);\r\n}\r\n\r\n\/* Apply Hover Styling to active Mega Menu - Third Level Links *\/\r\n#{$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,\r\n#{$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 {\r\n    color: $panel_third_level_font_color_hover;\r\n    font-weight: $panel_third_level_font_weight_hover;\r\n    text-decoration: $panel_third_level_text_decoration_hover;\r\n    @include background($panel_third_level_background_hover_from, $panel_third_level_background_hover_to);\r\n}\r\n\r\n\/* Apply Hover Styling to active Flyout Links and ancestors *\/\r\n#{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,\r\n#{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,\r\n#{$wrap} #{$menu} li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {\r\n    @include background($flyout_background_hover_from, $flyout_background_hover_to);\r\n    font-weight: $flyout_link_weight_hover;\r\n    text-decoration: $flyout_link_text_decoration_hover;\r\n    color: $flyout_link_color_hover;\r\n}<\/pre>\n
Applying Custom Styling to\u00a0active top level menu items<\/h3>\n
If you want to apply “active” styling which is different to the “hover” styling, go to Mega Menu > Menu Themes. <\/em>Set the “Hover” settings to how you’d like the menu items to appear on hover, then\u00a0insert the following into the Custom Styling area to set a different “Active” color.<\/p>\n
#{$wrap} #{$menu} > li.mega-menu-item {\r\n    &.mega-current-menu-item,\r\n    &.mega-current-menu-ancestor,\r\n    &.mega-current-page-ancestor {\r\n         > a.mega-menu-link {\r\n              background: red;\r\n              color: white;\r\n              font-weight: bold;\r\n              text-decoration: underline;\r\n        }\r\n    }\r\n}<\/pre>\n
Removing the highlight from an active menu item<\/h3>\n
To prevent a menu item from ever<\/em> being highlighted, give the menu item a custom class<\/a> of ‘never-highlight’.<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00a0and…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-24987","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faqs"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"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\u00a0and...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/24987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=24987"}],"version-history":[{"count":21,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/24987\/revisions"}],"predecessor-version":[{"id":271597,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/24987\/revisions\/271597"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=24987"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=24987"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=24987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}