Change navbar color in Twitter Bootstrap 3

    |
  • Added:
  • |
  • In: Wordpress

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap 3?

This Question Has 11 Answeres | Orginal Question | Jamal Khan

inverse and defult class name mention in twittter bootstrap cause them black and white color. better you should not override that and add a class near that and write you particular style for that

my_style{ background-color:green; }

like so. Thank you.

Just add an id to the html navbar, such as:

<nav id="navbar-yellow" class="navbar navbar-default navbar-fixed-top" role="navigation"> 

With this id you can style the navbar color, but also the links and dropdowns

Examples applied to different types of navbars

Black

Yellow

Darkblue

Red (Cherry)

Darkgreen

Here is the CSS

/* * Black navbar style */ #navbar-black.navbar-default { /* #3C3C3C - #222222 */ font-size: 14px; background-color: rgba(34, 34, 34, 1); background: -webkit-linear-gradient(top, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%); background: linear-gradient(to bottom, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%); border: 0px; border-radius: 0; } #navbar-black.navbar-default .navbar-nav>li>a:hover, #navbar-black.navbar-default .navbar-nav>li>a:focus, #navbar-black.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-black.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-black.navbar-default .navbar-nav>.active>a, #navbar-black.navbar-default .navbar-nav>.active>a:hover, #navbar-black.navbar-default .navbar-nav>.active>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 1); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%); } #sidebar-black, #column-black { background-color: #222222; } #navbar-black.navbar-default .navbar-toggle { border-color: #222222; } #navbar-black.navbar-default .navbar-toggle:hover, #navbar-black.navbar-default .navbar-toggle:focus { background-color: #3C3C3C; } #navbar-black.navbar-default .navbar-nav>li>a, #navbar-black.navbar-default .navbar-nav>li>ul>li>a, #navbar-black.navbar-default .navbar-brand { color: #999999; } #navbar-black.navbar-default .navbar-toggle .icon-bar, #navbar-black.navbar-default .navbar-toggle:hover .icon-bar, #navbar-black.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } /* * Red navbar style */ #navbar-red.navbar-default { /* #990033 - #cc0033 */ font-size: 14px; background-color: rgba(153, 0, 51, 1); background: -webkit-linear-gradient(top, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%); background: linear-gradient(to bottom, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%); border: 0px; border-radius: 0; } #navbar-red.navbar-default .navbar-nav>li>a:hover, #navbar-red.navbar-default .navbar-nav>li>a:focus, #navbar-red.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-red.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-red.navbar-default .navbar-nav>.active>a, #navbar-red.navbar-default .navbar-nav>.active>a:hover, #navbar-red.navbar-default .navbar-nav>.active>a:focus { color: rgba(51, 51, 51, 1); background-color: rgba(255, 255, 255, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } #sidebar-red, #column-red { background-color: #990033; } #navbar-red.navbar-default .navbar-toggle { border-color: #990033; } #navbar-red.navbar-default .navbar-toggle:hover, #navbar-red.navbar-default .navbar-toggle:focus { background-color: #cc0033; } #navbar-red.navbar-default .navbar-nav>li>a, #navbar-red.navbar-default .navbar-nav>li>ul>li>a, #navbar-red.navbar-default .navbar-brand { color: #999999; } #navbar-red.navbar-default .navbar-toggle .icon-bar, #navbar-red.navbar-default .navbar-toggle:hover .icon-bar, #navbar-red.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } /* * Darkblue navbar style */ #navbar-darkblue.navbar-default { /* #003399 - #0033cc */ font-size: 14px; background-color: rgba(51, 51, 153, 1); background: -webkit-linear-gradient(top, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%); background: linear-gradient(to bottom, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%); border: 0px; border-radius: 0; } #navbar-darkblue.navbar-default .navbar-nav>li>a:hover, #navbar-darkblue.navbar-default .navbar-nav>li>a:focus, #navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-darkblue.navbar-default .navbar-nav>.active>a, #navbar-darkblue.navbar-default .navbar-nav>.active>a:hover, #navbar-darkblue.navbar-default .navbar-nav>.active>a:focus { color: rgba(51, 51, 51, 1); background-color: rgba(255, 255, 255, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } #sidebar-darkblue, #column-darkblue { background-color: #333399; } #navbar-darkblue.navbar-default .navbar-toggle { border-color: #333399; } #navbar-darkblue.navbar-default .navbar-toggle:hover, #navbar-darkblue.navbar-default .navbar-toggle:focus { background-color: #3333cc; } #navbar-darkblue.navbar-default .navbar-nav>li>a, #navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a, #navbar-darkblue.navbar-default .navbar-brand { color: #999999; } #navbar-darkblue.navbar-default .navbar-toggle .icon-bar, #navbar-darkblue.navbar-default .navbar-toggle:hover .icon-bar, #navbar-darkblue.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } /* * Darkgreen navbar style */ #navbar-darkgreen.navbar-default { /* #006633 - #009933 */ font-size: 14px; background-color: rgba(0, 102, 51, 1); background: -webkit-linear-gradient(top, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%); background: linear-gradient(to bottom, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%); border: 0px; border-radius: 0; } #navbar-darkgreen.navbar-default .navbar-nav>li>a:hover, #navbar-darkgreen.navbar-default .navbar-nav>li>a:focus, #navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-darkgreen.navbar-default .navbar-nav>.active>a, #navbar-darkgreen.navbar-default .navbar-nav>.active>a:hover, #navbar-darkgreen.navbar-default .navbar-nav>.active>a:focus { color: rgba(51, 51, 51, 1); background-color: rgba(255, 255, 255, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } #sidebar-darkgreen, #column-darkgreen { background-color: #006633; } #navbar-darkgreen.navbar-default .navbar-toggle { border-color: #006633; } #navbar-darkgreen.navbar-default .navbar-toggle:hover, #navbar-darkgreen.navbar-default .navbar-toggle:focus { background-color: #009933; } #navbar-darkgreen.navbar-default .navbar-nav>li>a, #navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a, #navbar-darkgreen.navbar-default .navbar-brand { color: #999999; } #navbar-darkgreen.navbar-default .navbar-toggle .icon-bar, #navbar-darkgreen.navbar-default .navbar-toggle:hover .icon-bar, #navbar-darkgreen.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } /* * Yellow navbar style */ #navbar-yellow.navbar-default { /* #99ff00 - #ccff00 */ font-size: 14px; background-color: rgba(153, 255, 0, 1); background: -webkit-linear-gradient(top, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%); background: linear-gradient(to bottom, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%); border: 0px; border-radius: 0; } #navbar-yellow.navbar-default .navbar-nav>li>a:hover, #navbar-yellow.navbar-default .navbar-nav>li>a:focus, #navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:hover, #navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:focus, #navbar-yellow.navbar-default .navbar-nav>.active>a, #navbar-yellow.navbar-default .navbar-nav>.active>a:hover, #navbar-yellow.navbar-default .navbar-nav>.active>a:focus { color: rgba(51, 51, 51, 1); background-color: rgba(255, 255, 255, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } #sidebar-yellow, #column-yellow { background-color: #99ff00; } #navbar-yellow.navbar-default .navbar-toggle { border-color: #99ff00; } #navbar-yellow.navbar-default .navbar-toggle:hover, #navbar-yellow.navbar-default .navbar-toggle:focus { background-color: #ccff00; } #navbar-yellow.navbar-default .navbar-nav>li>a, #navbar-yellow.navbar-default .navbar-nav>li>ul>li>a, #navbar-yellow.navbar-default .navbar-brand { color: #999999; } #navbar-yellow.navbar-default .navbar-toggle .icon-bar, #navbar-yellow.navbar-default .navbar-toggle:hover .icon-bar, #navbar-yellow.navbar-default .navbar-toggle:focus .icon-bar { background-color: #ffffff; } 

Do you have to change the CSS directly? What about...

<nav class="navbar navbar-inverse" style="background-color: #333399;"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> 

You can create a custom navbar class, and then reference it to change the navbar without impacting other Bootstrap navs..

<nav class="navbar navbar-custom"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">... </button> <a class="navbar-brand" href="#">Title</a> </div> ... </nav> 

Bootstrap 3 CSS

.navbar-custom { background-color:#229922; color:#ffffff; border-radius:0; } .navbar-custom .navbar-nav > li > a { color:#fff; } .navbar-custom .navbar-nav > .active > a { color: #ffffff; background-color:transparent; } .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus, .navbar-custom .navbar-nav > .open >a { text-decoration: none; background-color: #33aa33; } .navbar-custom .navbar-brand { color:#eeeeee; } .navbar-custom .navbar-toggle { background-color:#eeeeee; } .navbar-custom .icon-bar { background-color:#33aa33; } 

Custom Navbar Demo on Bootply


If the Navbar has dropdowns, add the following to change dropdown color(s):

/* for dropdowns only */ .navbar-custom .navbar-nav .dropdown-menu { background-color: #33aa33; } .navbar-custom .navbar-nav .dropdown-menu>li>a { color: #fff; } .navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus { color: #33aa33; } 

Demo with Dropdown


Bootstrap 4 Update

I know the original question was for 3.x, but I thought a new Bootstrap 4 example would be helpful too. The CSS required is much less in Bootstrap 4...

.navbar-custom { background-color: #ff5500; } /* change the brand and text color */ .navbar-custom .navbar-brand, .navbar-custom .navbar-text { color: rgba(255,255,255,.8); } /* change the link color */ .navbar-custom .navbar-nav .nav-link { color: rgba(255,255,255,.5); } /* change the color of active or hovered links */ .navbar-custom .nav-item.active .nav-link, .navbar-custom .nav-item:hover .nav-link { color: #ffffff; } 

Bootstrap 4 Custom Navbar Demo

enter image description here

tl;dr - TWBSColor - Generate your own Bootstrap navbar

Version notes: - Online tool: Bootstrap 3.3.2+ / 4.0.0+ - This answer: Bootstrap 3.0.x

Available navbars

You've got two basic navbars:

<!-- A light one --> <nav class="navbar navbar-default" role="navigation"></nav> <!-- A dark one --> <nav class="navbar navbar-inverse" role="navigation"></nav> 

Default color usage

Here are the main colors and their usage:

  • #F8F8F8: navbar background
  • #E7E7E7: navbar border
  • #777: default color
  • #333: hover color (#5E5E5E for .nav-brand)
  • #555: active color
  • #D5D5D5: active background

Default style

If you want to put some custom style, here's the CSS you need to change:

/* navbar */ .navbar-default { background-color: #F8F8F8; border-color: #E7E7E7; } /* Title */ .navbar-default .navbar-brand { color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5E5E5E; } /* Link */ .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #E7E7E7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #D5D5D5; } /* Caret */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777; border-bottom-color: #777; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #333; border-bottom-color: #333; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #555; border-bottom-color: #555; } /* Mobile version */ .navbar-default .navbar-toggle { border-color: #DDD; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #DDD; } .navbar-default .navbar-toggle .icon-bar { background-color: #CCC; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; } } 

Custom colored navbar examples

Here are four examples of a custom colored navbar:

JSFiddle link

Enter image description here

And the SCSS code:

$bgDefault : #e74c3c; $bgHighlight : #c0392b; $colDefault : #ecf0f1; $colHighlight: #ffbbbc; .navbar-default { background-color: $bgDefault; border-color: $bgHighlight; .navbar-brand { color: $colDefault; &:hover, &:focus { color: $colHighlight; }} .navbar-text { color: $colDefault; } .navbar-nav { > li { > a { color: $colDefault; &:hover, &:focus { color: $colHighlight; }}} > .active { > a, > a:hover, > a:focus { color: $colHighlight; background-color: $bgHighlight; }} > .open { > a, > a:hover, > a:focus { color: $colHighlight; background-color: $bgHighlight; }}} .navbar-toggle { border-color: $bgHighlight; &:hover, &:focus { background-color: $bgHighlight; } .icon-bar { background-color: $colDefault; }} .navbar-collapse, .navbar-form { border-color: $colDefault; } .navbar-link { color: $colDefault; &:hover { color: $colHighlight; }}} @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu { > li > a { color: $colDefault; &:hover, &:focus { color: $colHighlight; }} > .active { > a, > a:hover, > a:focus, { color: $colHighlight; background-color: $bgHighlight; }}} } 

And finally, a little gift

I've just made a script which will allow you to generate your theme: TWBSColor - Generate your own Bootstrap navbar

[Update]: TWBSColor now generates SCSS/SASS/Less/CSS code.
[Update]: From now, you can use Less as the default language provided by TWBSColor
[Update]: TWBSColor now supports drop down menus colorization
[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added)

It took me a while, but I discovered that including the following was what made it possible to change the navbar color:

.navbar{ background-image: none; } 

It can be done directly by using style=" " attribute to whichever html tag you want to override it for eg.

<nav class="navbar navbar-default" style="font-weight: bold; background-color: #569AAB;"> 

this overrides bootstrap's default CSS.

There is no need to define a complete set of styling or CSS separately.

If it's only about changing the color of the Navbar my suggestion would be to use: Bootstrap Magic. You can change the values for different properties of the Navbar and see a preview. Download the result as a custom CSS style sheet or as a LESS variables file. You can change values with input fields and color pickers. Y

Try this too. This worked for me.

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

In this navbar CSS, set to own color:

/* Navbar */ .navbar-default { background-color: #F8F8F8; border-color: #E7E7E7; } /* Title */ .navbar-default .navbar-brand { color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5E5E5E; } /* Link */ .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #E7E7E7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #D5D5D5; } /* Caret */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777; border-bottom-color: #777; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #333; border-bottom-color: #333; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #555; border-bottom-color: #555; }

Using Less

You could also consider to compile your own version. Try http://getbootstrap.com/customize/ (which has a apart section for the Navbars settings (Default navbar and Inverted Navbar)) or download your own copy from https://github.com/twbs/bootstrap.

You will find the navbar settings in variables.less. navbar.less is used to compile the navbar (depends on variables.less and mixins.less).

Copy the 'navbar-default section' and fill in your own color settings. Changing the variables in variables.less will be the easiest way (changing the default or inverse navbar won't be a problem because you have one navbar per page only).

You won't change all settings in most cases:

// Navbar // ------------------------- // Basics of a navbar @navbar-height: 50px; @navbar-margin-bottom: @line-height-computed; @navbar-default-color: #777; @navbar-default-bg: #f8f8f8; @navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); // Navbar links @navbar-default-link-color: #777; @navbar-default-link-hover-color: #333; @navbar-default-link-hover-bg: transparent; @navbar-default-link-active-color: #555; @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); @navbar-default-link-disabled-color: #ccc; @navbar-default-link-disabled-bg: transparent; // Navbar brand label @navbar-default-brand-color: @navbar-default-link-color; @navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%); @navbar-default-brand-hover-bg: transparent; // Navbar toggle @navbar-default-toggle-hover-bg: #ddd; @navbar-default-toggle-icon-bar-bg: #ccc; @navbar-default-toggle-border-color: #ddd; 

You could also try http://twitterbootstrap3navbars.w3masters.nl/. This tool generates CSS code for your custom navbar. Optionally, you could also add gradient colors and borders to the navbar.


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top