I’d like to make the dropdown links in the dark menu a different color than the post-category links.
You can see it in action at: https://harrisrealestatecoaching.com (our demo build site)
My CSS (in custom code section):
.nav-orange a.sf-with-ul {color: #51BE54 !important;}
.nav-orange a.sf-with-ul:hover {color: #fff !important;}
.nav-blue a {color: #4db2ec !important;}
.nav-blue a:hover {color: #fff !important;}
The PROBLEM is that I need the active link, with the blue background, to stay WHITE, but it goes back to the original color when hover focus is lost. You can test it by clicking on the category link on our site – you’ll immediately see the bug…
Is there a good way to solve this? If there isn’t, can you tell me how to change the active background from being completely blue to being a border underneath the link?
Hello,
You should remove your current css and use this for the active color:
.sf-menu > .current-menu-item > a
and this for the non active menu color:
.menu-item-50074 .td-header-style-5 .sf-menu > li > a
Try not to use important where you can as it afects the active color as well.
Thank you!
Hi Bogdan —
The “active color” CSS you gave me seems to be working, but the “non-active menu color” isn’t.
I put both of these in the custom code section. The menu item 50074 is the correct item. This menus in on our sandbox site at https://harrisrealestatecoaching.com, and our new production site at https://timandjulieharris.com.
Need help, and sincerely appreciate it! Have a great evening…
Hi,
Please remove all your css regarding the menus and just use this code:
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-11805 > a{
color:yellow;
}
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-11807 > a{
color:yellow;
}
.td-header-wrap .black-menu .sf-menu > .current-menu-item > a{
color:white;
}
In the code simply switch the menu item numbers to correspond to your menu item classes. You can see the menu item number if you use the browser inspector: http://screencast.com/t/STExSf01
Thank you!
Not quite, but almost!
First 3 lines are working fine, but the active menu item isn’t setting it back to white?
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-50074 > a{ color:yellow; }
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-50080 > a{ color:yellow; }
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-52726 > a{ color:blue; }
.td-header-wrap .black-menu .sf-menu > .current-menu-item > a{color:white;}
It works fine on my end. i created the code and tested this out previously. Please remove any code you might already have so you can make sure it will not affect the code I provided. Here is an example on my end:
http://screencast.com/t/aiHDroDJ1T
Thanks.
Ah ha!
Yes, your code is working perfectly. Missing 1 thing, if possible. When hovering over that element, I added a:hover to keep it white. However, when you mouse down to the submenu items, it turns yellow again. Any way to keep that text white as long as the background is light blue? (mouse is over that element or subelements)
Ok,
Here is the final code. Replace all of it with this one and that should do it:
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-11805 > a{
color:yellow;
}
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-11807 > a{
color:yellow;
}
.td-header-wrap .black-menu .sf-menu > .current-menu-item > a{
color:white;
}
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-11805 > a:hover{
color:white;
}
.td-header-style-5 .td-header-menu-wrap .sf-menu > .menu-item-11807 > a:hover{
color:white;
}
Regards, Bogdan B
