Search code examples
cssbootstrap-4togglenavbarmaterialize

How to change background color of Bootstrap Navbar Toggler Icon when it's active when using other frameworks like Materialize?

I am working on a project which requires both Bootstrap & Materialize frameworks. I have this navbar toggle which is normal when not in active state.

enter image description here

But when it goes into active state and has a background fill with the default colors of Materialize CSS.

enter image description here

I am trying to set the background color to transparent but it doesn't. This is the CSS which I tried.

.navbar-toggler-icon{
  background-color: transparent !important;
}
.navbar-toggler-icon :active{
  background-color: transparent !important;
}

This is the codepen link.

Solution

  • I've added an idin the div that has all the content of thenavbar.

    <body>
  <div class="navbar navbar-dark navbar-expand-lg sticky-top w-100" >
            <div id="color" class="container p-2">
                <a class="navbar-brand font-weight-bold text-white mx-5 d-none d-sm-block" href="#">ReEvent</a>
                <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>
                  </div>
  </div>
    </body>

    When I change the color in an id if the id is on the div everything that is inside the div will be change together. So I put it just for the button receive the changes.

    But, I don't know why, the button keeps with the "bug" if you put the :focus just on it, so i've put the :focus on everything and after this I've removed the :focus of the a using one specific bg for him.

    body{
  background-color: #222;
}
.navbar-toggler-icon{
  background-color: transparent !important;
}
#color button :hover, #color :focus, #color button :active{
  background-color: transparent !important;
}

#color a :focus {
  background-color: white !important;
}