Twitter Bootstrap is a popular front-end framework to create responsive websites with some popular JavaScript plugins inbuilt. Here is a workaround to change navbar color in Twitter Bootstrap 3 instead of using the two basic navbar colors (light one / dark one) available.
0 1 2 3 4 | <!-- A light one --> <nav class="navbar navbar-default" role="navigation"></nav> <!-- A dark one --> <nav class="navbar navbar-inverse" role="navigation"></nav> |
To change the foreground and background color of navbars, you have to tackle with the following CSS rules specified in Bootstrap and put your own custom styles:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | /* 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; } } |
The default major color uses are as below:
- Navbar Background: #F8F8F8
- Navbar Border: #E7E7E7
- Default Color: #777
- Nav-brand Hover Color: #5E5E5E
- Hover Color: #333
- Active Background: #D5D5D5
- Active Color: #555
Change navbar color in Twitter Bootstrap 3
There are SCSS, SASS and LESS code as well. But I am intended to use easiest solution to change navbar color in Twitter Bootstrap 3 and I found a script that can do the same, using TWBSColor – Generate your own Bootstrap navbar.
This is a cool script that can generate your own Bootstrap navbar along with their SCSS, SASS and LESS code as well. Just click on the four rectangle boxes each and pick your color. You can copy the generated code & CSS and instead of overriding defaults, I would suggest you to copy rules into your custom CSS file and change the word ‘default‘ with ‘custom‘ into copied code. And at last use as below:
0 1 2 3 4 5 6 7 8 | <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> |
See the line #1 with ‘navbar-custom‘. This will allow you to use default navbar color and two navigation bar if you need so.
Beautiful and Thank you ^_^ 😀 🙂