Bootstrap 4 collapsed navbar background color

bootstrap 4 navbar
bootstrap 4 navbar right
navbar-toggler-icon color
bootstrap navbar background color
bootstrap 4 navbar right align
bootstrap 4 navbar always collapsed
bootstrap navbar with logo
navbar-toggler-icon not showing

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.

So the question is any class responsible for navbar collapsing? The only div I found so far is #navbarSupportedContent but it's only the content of ul in navbar (so it does not change the color of whole navbar). I can check in jquery if the navbar is collapsed then change the background color, but I would like to know if I can do it simply in css.

In addition to that I would like to say that the navbar default color is transparent, that's why I want to change it's color when it's collapsed.


I have also next question what's the class responsible for navbar toggler icon in BS4? I'm asking because I would like to change the color of the icon. I've already found and tried the following:

.navbar-toggler-icon {
  color:white !important;
}

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;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Change color on hover and when navbar-toggle is collapsed? : css, If you click on the button, background should become white and the 3 icon-bars should become orange. So what I basically want is that when the navbar has� Therefore, not including the navbar-expand* class makes the Navbar always collapsed. See these navbar breakpoint examples. As of Bootstrap 4 beta, the navbar-toggleable-* classes have changed to navbar-expand-*. In your case navbar-toggleable-sm would change to navbar-expand-md.

"...but the case is that my background color at the beginning is transparent and then if someone will collapse it then the background color should change."

I did like this:

<style>
.navbar { 
    background-color: transparent;
}
.navbar.collapse {
    display:flex;
}
.navbar.collapsing,
.navbar.show {
    background:white !important;
}
</style>



<nav class="navbar navbar-light navbarSupportedContent">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
    </button>
   <div class="collapse navbar-collapse navbarSupportedContent">
   </div>
</nav>

Navbar � Bootstrap, Responsive behavior depends on our Collapse JavaScript plugin. Navbar content --> </nav> <nav class="navbar navbar-light" style="background-color:� In bootstrap 4.3.1 I can change the background color of the toggler icon to white via the css code..navbar-toggler{ background-color:white; } And in my opinion the so changed icon looks fine as well on light as on dark background.

This is what worked form me:

    .navbar-collapse {
    background-color: white;
}

The Guide to Customising the Bootstrap 4 Navbar I wish I'd Had 6 , The Guide to Customising the Bootstrap 4 Navbar I wish I'd Had 6 Months Ago <button class="navbar-toggler" type="button" data-toggle="collapse" navbar is the base class where you can style the background colour etc� I believe I found an answer to this, but would appreciate any further comments or alternate solutions, as this seems to be a bit hacky.navbar {background-color: #8e181b;} .navbar-default .navbar-nav > li > a, .navbar-default .navbar-brand {color: #f1f1f1;} .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: #f1f1f1; background-color: #b27677

How to change Hamburger Toggler color in Bootstrap , The hamburger toggler color can be changed in Bootstrap 4 using 2 methods The -dark and -light represent the color of the background, not of the content on the navbar. div class = "navbar-collapse collapse" id = "nav1" >. Use any of the.bg-color classes to change the background color of the navbar (.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark and.bg-light) Tip: Add a white text color to all links in the navbar with the.navbar-dark class, or use the.navbar-light class to add a black text color.

HOW TO change the bootstrap 4 NAVBAR background color , SHOW ME SOME SUPPORT | | https://www.patreon.com/CodeDuration: 6:34 Posted: Nov 2, 2017 There are several included Navbar color schemes to Bootstrap 4. You can specify the background color using the bg- classes: bg-light, bg-dark, bg-info, bg-danger, bg-primary, bg-warning, or

Changing bootstrap navbar background color and font color, Please , Changing bootstrap navbar background color and font color, Please Help <div class="collapse navbar-collapse"> <ul class="nav navbar-nav� the html file was actually linked to the bootstrap-theme.min.css file also as it was mentioned in the Guil Hernandez's course of frameworks basics in stage 2 in video 6, so i found that the .navbar-default class was having some background image with the gradients and when i did it none here in the above code it worked..

Comments
  • Okay, the navbar collapse icon works perfect, but the case is that my background color at the beginning is transparent and then if someone will collapse it then the background color should change.
  • Great, thank you. What a shame that I did not think about it.