CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Major Productions
Major Productions

Reputation: 6062

Bootstrap 3: Having problems modifying the navbar

I have the following navbar HTML:

<nav id="k9nav" class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#k9nav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">K9SportsCenter</a>
        </div>

        <div class="collapse navbar-collapse" id="k9nav">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Services</a></li>
                <li><a href="#">Plans</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

And in testing how to modify it, I attempted to turn all the text white and apply a hover effect for the links in the <ul> with the following CSS:

#k9nav {
    background-color: blue;
    color: white;
}

#k9nav ol li:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

#k9nav ol li:active {
    background-color: black;
}

Unfortunately, the results were less than I expected:

navbar that doesn't look quite right

In case it's not clear from the pic, the text color has not been turned to white and the hover effect I want doesn't work at all (don't worry, this isn't my real design... I'm just trying to see how I can bend Bootstrap to my will).

I really just need to know what I should be modifying to get the results I want.

Upvotes: 0

Views: 69

Answers (4)

Arbel
Arbel

Reputation: 30999

You need to target them more specifically:

#k9nav ul li a,
#k9nav .navbar-brand {
    color: white;
}

DEMO: http://jsfiddle.net/VT4Fc/1/ (With css and js loaded from Bootstrap CDN)

Also you have a repeated id of #k9nav in your HTML which I suggest you to change.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196276

Bootstrap contains more specific rules for those elements, so it overrides your rules..

Try 

#k9nav .navbar-brand,
#k9nav.navbar-default .navbar-nav > li > a {
    color:white;
}
#k9nav.navbar-default .navbar-nav > li > a:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

Demo at http://jsfiddle.net/gaby/LLgkf/

Moreover, your html is invalid by using the k9nav id multiple times..

Upvotes: 1

Jerreck
Jerreck

Reputation: 3030

You aren't targeting the right elements for two reasons:

  1. You're specifying the wrong element for an un-ordered list. <ol> should be <ul>
  2. You are not nesting to the appropriate level.

You need to change this:

#k9nav ol li:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

#k9nav ol li:active {
    background-color: black;
}

To this:

#k9nav > div > div > ul > li:hover {
    background-color: black;
    border-bottom: 2px solid red;
}

#k9nav > div > div > ul > li:active {
    background-color: black;
}

Or even better:

.navbar-nav > li {
... styles
}

Here is a link for a better explanation of nesting:

http://www.htmldog.com/guides/css/intermediate/grouping/

Upvotes: 1

Billy Moon
Billy Moon

Reputation: 58619

You are targetting ol in css, but use ul in HTML

#k9nav ol li

and

<ul class="nav navbar-nav navbar-right">

So the rules are not being applied. You need to change one or the other, so they match each other.

Upvotes: 3

Related Questions