CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dsamardjiev
dsamardjiev

Reputation: 400

Bootstrap 3 navbar item active on page load

I am running into a weird issue with bootstrap 3, I am trying to make my home link in my navbar active when the page loads. Now looking at this bootstrap example:

http://getbootstrap.com/examples/starter-template

It's as simple as adding class="active on the li you need to be active..

But for some reason this isnt working for me, I have set up a fiddle to demonstrate the issue below. Does anyone have any idea why this is working for the example but not in my case?

http://jsfiddle.net/QS7f8/

Upvotes: 0

Views: 1263

Answers (1)

dsamardjiev
dsamardjiev

Reputation: 400

Ah I have figured it out, I had some conflicting classes for the active state.

I had:

.navbar ul.nav a:active { 
    color: #fff !important;
    background-color: #ff7454 !important;
}

.navbar .nav li.active a {
    color: #bababa;
}

When only this was required: 

.navbar .nav li.active a {
    color: #fff;
    background-color: #ff7454;
}

Here is the working fiddle: http://jsfiddle.net/QS7f8/2/

Upvotes: 1

Related Questions