CODEWITHSUNDEEP
csstwitter-bootstrap
Craig
Craig

Reputation: 18694

Nav SubMenu text colour

On small devices, my nav menu text colour is not great as you can see here:

enter image description here

There ARE menu items below 'Finances'. Just a bad colour. I want White.

On large devices, the menu is fine.

enter image description here

Actually, I want all menus to be the green colour, with white text.

In my CSS, I have this. How do I fix the text colour for the sub menus?

Normal menus seem OK.

.navbar-custom {
    background: #2B8173;
    color: white;
    border-radius: 0;
}

    .navbar-custom .navbar-nav > li > a {
        color: white;
    }

    .navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
        color: white;
        background-color: transparent;
    }

    .navbar-custom .navbar-brand {
        color: white;
    }

Upvotes: 0

Views: 128

Answers (1)

Macsupport
Macsupport

Reputation: 5444

jsFiddle

I don't know the structure of your navbar since you didn't post the html, but if your using Bootstrap 3 try:

.navbar-custom {
background: #2B8173;
color: white;
border-radius: 0;
}

.navbar-custom .navbar-nav > li > a {
    color: white;
}

.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: white;
    background-color: transparent;
}

.navbar-custom .navbar-brand {
    color: white;
}
@media (max-width: 767px){
.navbar-nav .open .dropdown-menu {
background-color: #2B8173;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a {
color: #FFF;
}
}

Upvotes: 1

Related Questions