How to change the color and background of this navbar?

Question

I have a navbar here, how do i change the color and the font color?

I tried changing editing the li's attributes, then the ul, and pretty much every element in this code, I'm stuck.

<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation">
    <div class="container navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header navigation">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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 navigation" href="#">Start Bootstrap</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navigation">
                <li class="navigation">
                    <a href="#" class="navigation">About</a>
                </li>

                <li>
                    <a href="#">Creators</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

What color do you want it? Bootstrap has a built-in black color and a white color. If you want another color you'll have to change/add some style sheets. — robere2, Dec 03 '16 at 19:42
Possible duplicate of [Change navbar color in Twitter Bootstrap 3](http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) — Alexandre Tranchant, Dec 03 '16 at 19:43
You haven't really tried much, if you couldn't get the colors to change... start at the top element, and work your way down. https://jsfiddle.net/hoevqu8a/1/ — junkfoodjunkie, Dec 03 '16 at 19:56

score 0 · Answer 1 · answered Dec 03 '16 at 19:50

Add class to your css

.navbar-header.navigation{
    background: your colour here;
}

or

Use inline style

<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation" style="background: your color;">

I'd won't recommend second approach as it is slower and not a good practice in general, but still will do. As for the first you can get rid of navbar-inverse or class or alternatively use it as css selector to override what bootstrap has

.navbar.navbar.navigation.color {
  background: red;
}

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation">
    <div class="container navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header navigation">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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 navigation" href="#">Start Bootstrap</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navigation">
                <li class="navigation">
                    <a href="#" class="navigation">About</a>
                </li>

                <li>
                    <a href="#">Creators</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

Using your color class I didn't notice at first point

Baezid Mostafa · Answer 2 · 2016-12-03T20:11:38.933

bootstrap class navbar-inverse default css is background-color: #222; border-color: #080808; and for the link text color by default css is .navbar-inverse .navbar-nav > li > a { color: rgb(157, 157, 157);}

So if you want to change the background color of the navbar and the link(means a tag or anchor text) you can try something like this. LiveOnFiddle

   .navbar-inverse{
      background-color:red;
      border-bottom-color:red;
    }
.navbar-inverse .navbar-nav>li>a {
   color: white;
}

How to change the color and background of this navbar?

2 Answers2