Posted By admin
How to change navbar color in Twitter Bootstrap

This course is for bootstrap4

<nav class="navbar navbar-custom">...</nav>
.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-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;

Create a custom navbar class, and then reference it to change the navbar without impacting other Bootstrap navs,you can see nabvar color is change.

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;

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *