Parent menu item does not respond to text color
When a child menu item is active, its parent menu should look the same. However, I don't know why the parent only responds to background-color: #83bf17
but not color: #6B4A38;
.
Live example: http://solutionsmvo.nazwa.pl/projekt/kama/lecznica/
CSS
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.current-menu-parent {
color: #6B4A38;
background-color: #83bf17;
}
Edit Sorry, forgot to mention which !important
doesn't work.
You need to target this:
.navbar-default .navbar-nav > li.current-menu-parent > a{
color:#6b4a38;
}
This should work.
Use !important
for color
as follows:
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.current-menu-parent {
color: #6B4A38 !important;
background-color: #83bf17;
}
Edit: try to comment out the color from the following class
.navbar-default .navbar-nav > li > a {
/* color: #83bf17;*/
display: block;
font-size: 1.25em;
font-weight: 700;
padding: 15px 30px;
text-transform: uppercase;
}
you have a more specific selector that overrides
.navbar-default .navbar-nav > li > a {
color: #83bf17;
....;
}
so you have to remove that for the element to inherit the parent value for the color property
try .current-menu-parent a {
you need to target a
if it gets color. And for targeting only direct descendant, a
use .current-menu-parent > a {
if there are no elements in between (I checked that there are no elements in between).
Another problem besides targeting a
is that you have an overly specific selector that overrides the color even if a
included in the selector.
try adding:
a.dropdown-toggle {
color: #6B4A38 !important;
}