How can I change the color of my hamburger menu to white?

[Eli90]

Hi,

I would like to change the color of my hamburger menu to white, how can I make it happen?

tried this code:

svg.icon.icon-hamburger {
background-color: #FFFFFF !important;
}

thank you in advance!

[Lucid_Polygon]

• Please include your theme link in the question as we have no idea what your website looks like or which theme are you using.
• Ideally it should be:

svg.icon.icon-hamburger {
      fill: #FFFFFF !important;
}​

[PageFly-Richard]

Hi @Eli90

Can you share with me the page url..

[SmallTask]

Hi @Eli90 ,

Kindly share your store URL, so that we can check and provide you with the solution.

[ReturnPrime]

Hey @Eli90 ,
Welcome to the Shopify community!
You can follow the instruction below:
Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file.

svg.icon.icon-hamburger {
 fill: #fff !important;
}​

If you feel like my answer is helpful, please Like and mark it as a solution**.** Let me know if you have any further questions.
Thank you!
Raman

[Eli90]

@SmallTask @Lucid_Polygon @ReturnPrime @PageFly-Richard

thank you all for helping, the solutions didn’t work unfortunately.

Url. https://sugar-free-eu.myshopify.com/

PASSWORD: eveirt

[Lucid_Polygon]

@Eli90 I tested it on your website and it

worked. Where did you put the code?

[Eli90]

@Lucid_Polygon Hi, theme.css

[Lucid_Polygon]

I just checked your page. I don’t find the code. Inspect and show where did you put it. Like the screenshot I sent above.

If you have put it rightly, when you right click on the burger icon and click inspect, you should see it in chrome.

[Eli90]

@Lucid_Polygon I’m not sure why, but I can’t see it although it was added to the theme.css

[Lucid_Polygon]

Your code is wrong . The code is Fill not Color. Please check and write the correct code.

[Eli90]

@Lucid_Polygon I tried both (fill first), this also doesn’t work

[Lucid_Polygon]

Something is wrong in your theme as the code is tested and right. Try this:

.icon-hamburger {
 fill: #fff !important;
}

Keep this code and let us know.

[Eli90]

@Lucid_Polygon

yes, something is probably wrong. This also doesn’t work

[Lucid_Polygon]

Try putting inline css. Go to
Assets > icon-burger > then add inline CSS

style="fill: white !important"


[Eli90]

@Lucid_Polygon you’re the best! worked like magic! thanks a lot, I was trying to solve it for so long!!!

thank you !!

[Lucid_Polygon]

Please like the replies and mark them as an accepted solutions. Thanks.