How do change the color for the burger menu. Our mobile website has a burger menu but due to the colors you can not see it.
Your theme uses a font awesome icon for your hamburger menu, add the below to your css to change it’s color
.mobile-trigger i.fas.fa-bars {
color: red;
}
Barry Grennan
Hi @swarlop
Sure, you can change the color of the burger menu by adding CSS to this class:
.fas.fa-bars {
color: #FFFFFF; /* Or any color you'd like */}
Replace #FFFFFF with your preferred color code. If you’re using Font Awesome 6, the class might be:
.fa-solid.fa-bars {
color: #FFFFFF;
}
This will update the burger icon color on your mobile website as needed.
I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!
Where in here do I include the change?
$(‘.mobile-trigger’) .click(function() {
$(‘.custom-menu-primary .hs-menu-wrapper’).slideToggle(250);
$(‘body’).toggleClass(‘mobile-open’);
$(‘.child-trigger’).removeClass(‘child-open’);
$(‘.hs-menu-children-wrapper’).slideUp(250);
return false;
});
@swarlop that is javascript (jquery), that looks like it’s for opening and closing the menu. You’re looking for some css. A quick look tells me your theme has a main.css file at least. You could put it in there.
Or even better, I see module_header-navigation2023.min.css, so that means the header-navigation2023 module is outputting some css, you could put it in there.
Barry Grennan
Thank you for the help, I got the color changed but now the menu is not working on mobile. Any suggestions?
@BarryGrennan @GRajput Thank you for the help, I got the color changed but now the menu is not working on mobile. Any suggestions? I can see that its there but it doesnt funcion.