Skip to content

CSS Customization: How to change color of "active menu link"

1 minute read

You can use this CSS to highlight active menu item:

css
html body#myhome-app .mh-header--transparent #mega_main_menu.mh-primary>.menu_holder>.menu_inner>ul>li.current-menu-item>.item_link *,
html body#myhome-app .mh-menu-primary-color-background .mh-header:not(.mh-header--transparent) #mega_main_menu.mh-primary>.menu_holder>.menu_inner>ul>li.current-menu-item>.item_link *,
html body#myhome-app #mega_main_menu.mh-primary .mega_dropdown > li.current-menu-item > .item_link *,
html body#myhome-app .current-menu-item > .item_link > .link_content > .link_text,
html body .mh-fixed-menu.mh-fixed-menu--active #mega_main_menu.mh-primary>.menu_holder:not(.sticky_container)>.menu_inner .current-menu-item > .item_link > .link_content > .link_text, html body.myhome-body div #mega_main_menu.mh-primary>.menu_holder>.menu_inner .current-menu-item > .item_link > .link_content > .link_text {
color:orange!important;
}

In this article you can find information how to add custom CSS to any WordPress Theme:

Ask the people who build MyHome WPBakery

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Was this guide helpful?