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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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