CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Georgi Antonov
Georgi Antonov

Reputation: 1641

bootstrap navbar change active li background color manually

So I have bootstrap navbar which is fixed and have body padding-top: 50px; so far so good but the bootstrap.js and .css files make clicked li background color to be white and i want it to be black i guess the default is white.So i tried to manually change background-color property of the .active class

HTML:

<header>
<nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#"><img id="logo-img" src="images/logo.png" alt="logo"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-home"></span> Sales</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="fa fa-cogs"></span> Services</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-link"></span> About Us</a></li>
        </ul>
        </div>
    </div>
</nav>
</header>

in custom CSS i have but nothing happens it does not change from white to black:

.active {
    background-color: black !important;
}

Upvotes: 0

Views: 4529

Answers (1)

Peter
Peter

Reputation: 1290

Just changing the background of the .active class will not work

try the following: 

ul.nav a:hover, ul.nav a:focus, ul.nav a:active { color: #000; }

I don't thing !important will be necessairy

Upvotes: 5

Related Questions