Navbar-toggler color change

Hi,
You could just add this CSS

.navbar .navbar-toggler[aria-expanded="true"] {
color: #9933CC!important;
}
.navbar .navbar-toggler:focus{
color: #ff4444;
}

and remove JS or jQuery related to this. This should fix the problem.

Hello pawled,

If You want to change a navbar-toggler color you can add an eventListener attached to click event and then check aria-expanded attribute value. Depending on attribute value You can toggle a class .bg-* and choose from availale colors https://mdbootstrap.com/docs/standard/content-styles/colors/ or you can create Your own class and add to it styling with background-color property.

Here is some example:

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  if(this.getAttribute('aria-expanded')) { 
    this.classList.toggle('bg-secondary');
  };
});

If this solution does not solve your problem, please send us code snippet. Best regards

Hello pawled,

If You want to change color of hamburger icon You can add this code:

$('.navbar-toggler').click(function() {
  if($(".navbar-toggler").attr("aria-expanded")){
    $(".fa").toggleClass(".icon-color");
  };
});

in Vanilla JS:

document.querySelector('.navbar-toggler').addEventListener('click', function(){ 
  const iconEl = document.getElementsByTagName('I')[0];
  if(this.getAttribute('aria-expanded')) { 
    iconEl.classList.toggle('icon-color');
  };
});

and in Your CSS file:

.iconColor {
    color: #9933CC!important;
  }

in additon to Your next question, You can simply add to Your CSS file extra rule:

.navbar .navbar-toggler:focus {
  color: #ff4444;
}   

I created and updated snippet for You: Hamburger menu

Hope this will help You.
Best regards

I have noticed the following problem. When I double-click the hamburger button (before the menu opens completely), the colors are inverted. a similar problem occurs with your hamburger animations available for the jQuery version (then the close icon appears for a closed menu).