In your style.css change these:
.main-navigation li a:hover {
color: #yourcolor;
}
for the main navigation on mouse over
.main-navigation li ul li a:hover {
background: #444;
color: #yourcolor;
}
for the drop down-menu on mouse over
and
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #yourcolor;
font-weight: bold;
}
for the current page or category
If you want to have the current sub-category also to be highlighted with a custom color,
also change this:
.main-navigation .sub-menu .current-menu-item > a,
.main-navigation .sub-menu .current-menu-ancestor > a,
.main-navigation .sub-menu .current_page_item > a,
.main-navigation .sub-menu .current_page_ancestor > a {
color: #yourcolor;
}
replace ‘yourcolor’ with the color of your choice. Should work 🙂 Let me know
No! Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.
For the hex color code, I think it´s the best to use the accent color of your website, which is defined in Leaf Options.
Thread Starter
NCRoma
(@ncroma)
Resolved! Sadly I am far too into this to go and start all over again in a child theme 🙁 But next time I’ll know that is the right thing to do! Thanks!
very helpful!!! thank you!
