CODEWITHSUNDEEP
csstwitter-bootstrapnav
pwiz
pwiz

Reputation: 193

Nav Pills not active after I styled them differently in twitter bootstrap

I have tried to style the nav-pills. Everything works fine except the active state is broken. How do I get the nav-pill to be active on the first tab with the new style?

<div class="container-fluid">
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="tabbable" style="text-align: center;">
            <ul class="nav nav-pills">
                <li class="active"> <a href="#9" id="menu-webinars" data-toggle="tab"><h1>Webinars</h1></a>
                </li>
                <li>    <a href="#10" id="menu-case-review" data-toggle="tab"><h1>Case Review Sessions</h1></a>

                </li>
                <li>    <a href="#11" id="menu-networking-meetups" data-toggle="tab"><h1>Networking Meetups</h1></a>

                </li>
                <li>    <a href="#12" id="menu-certification" data-toggle="tab"><h1>Certification</h1></a>

                </li>
            </ul>

and here is the css (I know it's ugly)

#menu-webinars {
color: #326799;
background-color: #ebedef;
border-radius: 0;
}

#menu-webinars:hover {
background-color: #1abc9c;
}

#menu-webinars:focus {
background-color: #1abc9c;
}

#menu-webinars:focus h1 {
color: #fff;
}

#menu-webinars:hover h1 {
color: #fff;
}

#menu-webinars h1 {
color: #545454;
margin-top: -13px;
margin-bottom: 10px;
line-height: 21px;
font-size: 21px;
}

#menu-case-review {
color: #326799;
background-color: #ebedef;
border-radius: 0;
}

#menu-case-review:hover {
background-color: #e4a824;
}

#menu-case-review:hover h1 {
color: #fff;
}

#menu-case-review:focus {
background-color: #e4a824;
}

#menu-case-review:focus h1 {
color: #fff;
}

#menu-case-review h1 {
color: #545454;
margin-top: -13px;
margin-bottom: 10px;
line-height: 21px;
font-size: 21px;
}

#menu-networking-meetups {
color: #326799;
background-color: #ebedef;
border-radius: 0;
}

#menu-networking-meetups:hover {
background-color: #326699;
}

#menu-networking-meetups:hover h1 {
color: #fff;
}

#menu-networking-meetups:focus {
background-color: #326699;
}

#menu-networking-meetups:focus h1 {
color: #fff;
}

#menu-networking-meetups h1 {
color: #545454;
    margin-top: -13px;
margin-bottom: 10px;
line-height: 21px;
font-size: 21px;
}

#menu-certification {
color: #326799;
background-color: #ebedef;
border-radius: 0;
}

#menu-certification:hover {
background-color: #d8782e;
}

#menu-certification:hover h1 {
color: #fff;
}

#menu-certification:focus {
background-color: #d8782e;
}

#menu-certification:focus h1 {
color: #fff;
}

#menu-certification h1 {
color: #545454;
margin-top: -13px;
margin-bottom: 10px;
line-height: 21px;
font-size: 21px;
}

Upvotes: 0

Views: 384

Answers (1)

Samih
Samih

Reputation: 1088

Your problem is with specificity (see http://css-tricks.com/specifics-on-css-specificity/ if you are interested in learning more). Your #menu-webinars selector is overriding the active class background color.

You could fix it by adding a selector like this:

li.active > #menu-webinars {
    background-color: #0000FF;
}

But you will also need a similar rule for the other nav pills and their ids. This is because an ID selector is "stronger" than almost any other selector.

Another way would be to add something like:

li.active > a {
    background-color: #0000FF !important;
}

This will work for all your nav pills, but it is considered bad practice because that !important destroys the "cascading" in "cascading style sheets" for that property.

The best (but also longest) solution is to stop using so many ID selectors in your CSS. Id selectors are not good because they can only ever apply to one element (because in HTML no two elements can have the same ID). Better to use class names or element selectors to set your styles.

Hope that helps.

Upvotes: 0

Related Questions