如何更改汉堡的背景颜色

Question

I tried to change the background color of the hamburger from black to yellow yet no success. Here is my attempt:

 //hamburger $(".hamburger").toggleClass("is-active"); var $hamburger = $(".hamburger"); $hamburger.on("click", function(e) { $hamburger.toggleClass("is-active"); // Do something else, like open/close menu }); 

 .hamburger{ background-color: yellow; } 

  <link href="https://cdn.rawgit.com/jonsuh/hamburgers/0aedeec9/dist/hamburgers.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <button class="hamburger hamburger--emphatic is-active" type="button" id="clickme"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> 

Answer 1

You don't need to add !important to change color, you can target the inner children, by targeting them using a custom parent class(.hamburger class here).

Doing this will override the hamburger.css, without using important class and also keep ur code clean

.hamburger1 .hamburger-inner,
.hamburger1 .hamburger-inner::before,
.hamburger1 .hamburger-inner::after {
  background-color: yellow;
}

 //hamburger $(".hamburger1").toggleClass("is-active"); var $hamburger1 = $(".hamburger1"); $hamburger1.on("click", function(e) { $hamburger1.toggleClass("is-active"); // Do something else, like open/close menu }); //hamburger var $hamburger2 = $(".hamburger2"); $hamburger2.on("click", function(e) { $hamburger2.toggleClass("is-active"); // Do something else, like open/close menu }); 

 .hamburger1 .hamburger-inner, .hamburger1 .hamburger-inner::before, .hamburger1 .hamburger-inner::after { background-color: yellow; } .hamburger2.is-active .hamburger-inner, .hamburger2.is-active .hamburger-inner::before, .hamburger2.is-active .hamburger-inner::after { background-color: yellow; } 

 <link href="https://cdn.rawgit.com/jonsuh/hamburgers/0aedeec9/dist/hamburgers.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <button class="hamburger hamburger1 hamburger--emphatic is-active" type="button" id="clickme"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <h3>If u want on click</h3> <button class="hamburger hamburger2 hamburger--emphatic " type="button" id="clickme2"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> 

Answer 2

Since you are loading an external CSS sheet, make sure you add your custom CSS below and include this:

.hamburger-inner, 
.hamburger-inner::before,
.hamburger-inner::after {
  background-color: yellow;
}

And you should be good to go.