Change Bootstrap Navbar Color, Text and Hover Color

Hi, we'll see how to change bootstrap navbar color, text and hover color. You can easily create website navigation menu with Bootstrap Navbar component. Though it comes in two different themes as lighter and darker shade, it may not serve everyone’s purpose. Changing bootstrap navbar color is simple than you think but while changing the background color you must also consider customizing text color and hover color, to make it more appealing.

If you know LESS or SASS then you can easily create custom bootstrap skin yourself. For those who didn't, don't worry. I'll show you how to override the navbar css elements of twitter bootstrap. Either you can create a new navbar class or override the default one in bootstrap framework.

Change Bootstrap Navbar Background, Text and Hover Color

First let's build a navbar component in bootstrap. Then I'll show you how to customize that bootstrap navbar.

Create Default Navbar in Bootstrap

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
                <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="#">Koding Made Simple</a>
        </div>
        <!-- menu -->
        <div class="collapse navbar-collapse navbar-right" id="mynavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Bootstrap</a></li>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>
    </div>
</nav>

The above markup will generate a default navigation menu that looks like this in bootstrap. You can also add search box with icon to this navbar.

Bootstrap Navbar - Before Changing Color

Now let us customize this.

Customize the Bootstrap Navbar Color

As I said earlier, we have to override bootstrap styles. It's better if you make all your changes in a separate stylesheet and attach it below the bootstrap css file. By this way bootstrap styles will be replaced with your own.

Here are the css modifications you have to make to change the navbar color.

.navbar-default {
    background-color: #CC0000;
    border-color: #AA0000;
    border-radius: 0;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #FFF;
}

.navbar-default .navbar-nav > li > a {
    color: #FFF;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: #AA0000;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFF;
    background-color: #AA0000;
}

.navbar-default .navbar-text {
    color: #FFF;
}

.navbar-default .navbar-toggle {
    border-color: #AA0000;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #AA0000;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

All the above changes will make our bootstrap navbar to look like this.

Bootstrap Navbar - After Changing Color

This is how it will look in the desktop view. As we know bootstrap is responsive, this navigation bar will collapse in mobile viewport like this.

Bootstrap Navbar Mobile View - Collapsed

If you click on the striped button on the top-right corner, then the navbar will expand to show up the menu items like this.

Bootstrap Navbar Mobile View -Expanded

Note: Navbar collapse/expand option requires javascript. Make sure to include bootstrap.js file for this to work.

If you want to keep the default navbar untouched, then change the css class .navbar-default to something like .navbar-custom in the above code.

Here is how you can do it.

index.html

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Bootstrap Navbar Color</title>
    <link href="path/to/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="path/to/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-custom" role="navigation">
    <div class="container-fluid">
        <!-- logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
                <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="#">Koding Made Simple</a>
        </div>
        <!-- menu -->
        <div class="collapse navbar-collapse navbar-right" id="mynavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Bootstrap</a></li>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>
    </div>
</nav>

<script src="path/to/jquery-1.10.2.js"></script>
<script src="path/to/bootstrap.js"></script>
</body>
</html>

style.css

.navbar-custom {
    background-color: #CC0000;
    border-color: #AA0000;
    border-radius: 0;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: #FFF;
}

.navbar-custom .navbar-nav > li > a {
    color: #FFF;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    background-color: #AA0000;
}

.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
    color: #FFF;
    background-color: #AA0000;
}

.navbar-custom .navbar-text {
    color: #FFF;
}

.navbar-custom .navbar-toggle {
    border-color: #AA0000;
}

.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
    background-color: #AA0000;
}

.navbar-custom .navbar-toggle .icon-bar {
    background-color: #FFF;
}

Likewise you can change bootstrap navbar color, text and hover color easily. I hope you find this bootstrap navbar customization tutorial useful.