Bootstrap 4 collapsed navbar background color

Question

I want to change background color of collapsed navbar in bootstrap 4 alpha v6. Of course I want to change the background color of whole navbar.

Answer 1

Works on v4 as well.

Here's a Bootstrap 4 alpha6 CSS walkthrough covering modifications of .navbar itself, inside links and hamburger button (all avoiding !important which should be used only as last override resort):

/* change navbar background */
nav.navbar {
  background: transparent;
}
/* change navbar-brand color */
.navbar a.navbar-brand {
  color: white;
}
/* change navbar-brand color on hover */
.navbar a.navbar-brand:hover {
  color: green;
}
/*  change navbar li colors, also active one but not disabled one */
.navbar ul.navbar-nav li.nav-item a.nav-link {
  color: white;
}
/* change navbar-toggler inside lines color (stroke) */
.navbar-light span.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='yellow' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  color: white;
}
/* change hamburger button border color */
button.navbar-toggler.navbar-toggler-right {
  border-color: yellow;
}
/* change navbar background on collapse */
@media (max-width: 768px) {
  nav.navbar {
    background: lightgray;
  }
}

  
    
  
  Navbar
  

    

      

        Home (current)
      
      

        Link
      
      

        Disabled
      
    
    

      
      Search