To change the color without using !important, target the inner children by specifying a custom parent class (in this case, the .hamburger class).
This method will override the hamburger.css styles without the need for using !important, keeping your code clean.
.hamburger1 .hamburger-inner,
.hamburger1 .hamburger-inner::before,
.hamburger1 .hamburger-inner::after {
background-color: yellow;
}
// Toggle active class for hamburger button with class name "hamburger1"
$(".hamburger1").toggleClass("is-active");
var $hamburger1 = $(".hamburger1");
$hamburger1.on("click", function(e) {
$hamburger1.toggleClass("is-active");
// Add additional functionality here, like opening/closing a menu
});
// Toggle active class for hamburger button with class name "hamburger2"
var $hamburger2 = $(".hamburger2");
$hamburger2.on("click", function(e) {
$hamburger2.toggleClass("is-active");
// Add additional functionality here, like opening/closing a 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 you want an onclick event:</h3>
<button class="hamburger hamburger2 hamburger--emphatic " type="button" id="clickme2">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>