CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
smeeb
smeeb

Reputation: 29577

Bootstrap 3 navbar not responding to style changes

Here's my navbar:

<body>
    <div class="wrapper">
        <div class="container-fluid">
            <nav class="navbar navbar-inverse">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">My<b>App</b></a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li><a href="#">Learn</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="pull-right"><a href="#">Sign In | Register</a></li>
                    </ul>
                </div>
            </nav>

        <!-- The rest omitted for brevity. -->

And my style.css:

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.navbar-fixed-top {
    min-height: 200px;
}

.navbar-nav > a {
    color: rgb(255,0,0);
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
}

.footer {
    background: rgb(0, 100, 255);
}

And the corresponding jsFiddle: http://jsfiddle.net/srhwgdsr/

I am trying to do several things here:

Why are none of these attempts working? Do I not have Bootstrap 3 configured correctly? Is something "locked" somehow?

Upvotes: 2

Views: 120

Answers (1)

APAD1
APAD1

Reputation: 13666

It's a specificity issue. Bootstrap's CSS is more specific than yours, so it takes precedent. If you use the same selectors that are defined in Bootstrap, it will work correctly. Also, you're using JSFiddle incorrectly. There shouldn't be any meta/head tags and external resources should be defined in the sidebar, not inline.

For instance, to target the links in the header, use this:

.navbar-inverse .navbar-nav>li>a {
    color: rgb(255,0,0);
}

Updated JSFiddle

Upvotes: 6

Related Questions