Topic: Navbar-toggler color change

pawled free asked 3 years ago


How to change navbar-toggler color after opening? I mean javascript.


Dawid Wajszczuk staff answered 3 years ago


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.


pawled free answered 3 years ago


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).


Piotr Urbaniak free answered 3 years ago


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


Piotr Urbaniak free answered 3 years ago


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


pawled free commented 3 years ago

Any clean JS solution?


Piotr Urbaniak free commented 3 years ago

Could You please specify what you mean by clean JS in this example?


pawled free commented 3 years ago

Sorry. I didn't spot. It is not jQuery script.

I want to change color of hamburger icon. Not background!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: Mobile
  • Browser: Chrome
  • OS: Android
  • Provided sample code: No
  • Provided link: No