Hi,
I’m trying to change the highlight colour of the main menu selected item. I have found this post which partly solves the problem Black bar underneath selected menu item but for some reason my site is showing two highlights, one from the theme and a second from the CSS code:
http://www.screencast.com/t/Rf04DKy6Vw
The code I’m using is:
/* Sub main menu background colour */
.sf-menu ul .td-menu-item {
background-color: #494949;
color: #ffffff;
}
.sf-menu ul .td-menu-item a {
color: #FFF;
}
.sf-menu > .current-menu-item > a, .sf-menu > .current-menu-ancestor > a, .sf-menu > .current-category-ancestor > a, .sf-menu > li > a:hover, .sf-menu > .sfHover > a {
border-bottom: 4px solid #F10808;
}
Many thanks
Hi,
What theme version do you use? Please note that the above custom css is for version 4 of the theme and may not work.
Do you want to change the border color for active items and when you hover it? – http://screencast.com/t/noFw3p2DBX
.sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #FF0000 !important;
}
Thanks!
That works perfectly, many thanks.
