CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jody Stocks
Jody Stocks

Reputation: 93

How to Style Bootstrap 3 acive class

I have been googling this for about 3 days now and have tried just about every example iv seen but still cant style the active class.

Here is my HTML

  <div class="navbar navbar-inverse navbar-fixed-top" id="mainHeader"    role="navigation">
    <div class="container">


        <button class="navbar-toggle" data-target=".navbar-responsive-collapse"
                data-toggle="collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button> 
        <div class="nav-collapse collapse navbar-responsive-collapse nav-hover-orange">
            <ul class="nav navbar-nav pull-right">

                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="houseoldRemovals.html">Houseold Removals</a></li>
                <li><a href="officeRemovals.html">Office Removals</a></li>
                <li><a href="storage.html">Storage</a></li>
                <li><a href="tipsAndAdvice.html">Tips & Advice</a></li>
                <li><a href="termsAndConditions.html">Terms and conditions</a></li>
            </ul> 
        </div> 
    </div> 
</div>
<!-- NAV END -->

Upvotes: 1

Views: 49

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362350

You should be able to do this..

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a {
  background-color: #11bb11;
}

Demo: http://bootply.com/R0zDR7NMCM

Upvotes: 1

Sarower Jahan
Sarower Jahan

Reputation: 1495

Your coding is not bootstrap standard.

Rename the nav-collapse to navbar-collapse.

copy the css below and change the background color to orange. 

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus{
     background:orange;
}

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16301

Just add this to your css:

.navbar-inverse .navbar-nav .active a   {
    background-color: #FFF;
    color: #333;
    --etc--    }

Upvotes: 0

Related Questions