# Burger Menu on Mobile

**URL:** <https://community.hubspot.com/t/burger-menu-on-mobile/135104>\
**Category:** CMS Development\
**Tags:** starter\
**Created:** [June 24, 2025, 6:13pm UTC](https://community.hubspot.com/t/burger-menu-on-mobile/135104 "2025-06-24T18:13:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![swarlop](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/swarlop/32/76463_2.png) [@swarlop](https://community.hubspot.com/u/swarlop)\
**Post date:** [June 24, 2025, 6:13pm UTC](https://community.hubspot.com/t/burger-menu-on-mobile/135104/1 "2025-06-24T18:13:03Z")

</div>

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](http://www.nexusglobal.com)

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [June 24, 2025, 11:03pm UTC](https://community.hubspot.com/t/burger-menu-on-mobile/135104/2 "2025-06-24T23:03:58Z")

</div>

Your theme uses a font awesome icon for your hamburger menu, add the below to your css to change it’s color

```lia-code-sample
.mobile-trigger i.fas.fa-bars {
 color: red;
}

```

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [June 25, 2025, 8:23am UTC](https://community.hubspot.com/t/burger-menu-on-mobile/135104/3 "2025-06-25T08:23:29Z")

</div>

Hi @swarlop

Sure, you can change the color of the burger menu by adding CSS to this class:

```lia-code-sample
.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:

```lia-code-sample
.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!

---

<div class="post-metadata">

**Author:** ![swarlop](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/swarlop/32/76463_2.png) [@swarlop](https://community.hubspot.com/u/swarlop)\
**Post date:** [June 25, 2025, 2:55pm UTC](https://community.hubspot.com/t/burger-menu-on-mobile/135104/4 "2025-06-25T14:55:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [June 26, 2025, 12:02pm UTC](https://community.hubspot.com/t/burger-menu-on-mobile/135104/5 "2025-06-26T12:02:51Z")

</div>

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

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![swarlop](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/swarlop/32/76463_2.png) [@swarlop](https://community.hubspot.com/u/swarlop)\
**Post date:** [June 26, 2025, 6:03pm UTC](https://community.hubspot.com/t/burger-menu-on-mobile/135104/6 "2025-06-26T18:03:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![swarlop](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/swarlop/32/76463_2.png) [@swarlop](https://community.hubspot.com/u/swarlop)\
**Post date:** [July 2, 2025, 5:38pm UTC](https://community.hubspot.com/t/burger-menu-on-mobile/135104/7 "2025-07-02T17:38:46Z")

</div>

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