Burger Menu on Mobile

[swarlop]

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.

www.nexusglobal.com

[BarryGrennan · Accepted solution]

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

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[swarlop]

@GRajput @BarryGrennan 

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;
});

[BarryGrennan]

@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

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[swarlop]

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

[swarlop]

Thank you for the help, I got the color changed but now the menu is not working on mobile. Any suggestions?

[GRajput · Accepted solution]

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!

[BarryGrennan · Accepted solution]

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

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn