How do I change the color of the hamburger mobile menu icon?

[freebirdpaperie]

[Note: The title of this post has been edited by a moderator.]

Hi all! Trying to change out the hamburger menu image (who knew that thing was called a hamburger?! lol), as it appears changing the color of it isn't possible (because it's an image). I'm using the Spotlight Theme for this site: www.BodmerFamilyFootcare.com

Another helper in a separate forum told me the following (and I need further assistance doing this):

"The hamburger image file is likely a global resource stored outside of the theme. The way to get around it would be to upload your own hamburger image, then add a CSS rule to specify the element use that image instead."

So the big question is: where exactly is this snippet in the CSS for me to add in my custom image, and how/where do I put my image online to then insert into the CSS? Relative newbie to coding, etc., but I can follow directions very well. Thank you in advance!

[BJ5 · Accepted solution]

You're in luck with that theme. It looks like it's purely CSS and no image. Add this to Settings > SEO > Header Code to override the color. I'm using black here, but you can subsitute #000000 with any other hex code color:

<style>
.hamburger-line, .menu-text
{
background-color: #000000 !important; 
color: #000000 !important;
}
</style>

This also makes sure the word "menu" is the same color.

[BJ5 · Accepted solution]

You're in luck with that theme. It looks like it's purely CSS and no image. Add this to Settings > SEO > Header Code to override the color. I'm using black here, but you can subsitute #000000 with any other hex code color:

<style>
.hamburger-line, .menu-text
{
background-color: #000000 !important; 
color: #000000 !important;
}
</style>

This also makes sure the word "menu" is the same color.

[freebirdpaperie]

Hey! So I saw another thread where someone mentioned adding in header code (I was trying to change the button color on the site), and I tried it in just that page's header code and that worked. That's just a side note question. Any draw back to doing that? (other than that particular code not being on other pages if I go to add a button in)?

[Adam7]

Adding to a Pages's header code (instead of on the Settings tab) will work exactly the same way, except it will only apply to that particular page instead of all pages of the site.

[freebirdpaperie]

Thank you! You guys are amazing and SO fast!!! ❤️

[Adam7]

All thanks should go to @BJ for this.

[freebirdpaperie]

Hm @BJ still having a little trouble here. Can you see the menu on the site now? I need the word "menu" to still show up in the #44331b brown. The code changed it from a word to a little rectangle brown box.

The header code in its entirety now says:

<style>
.wsite-social .wsite-social-item {
color: #000000 !important;
}

.wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner {
background:#fff !important;
color:#44331b !important;
}

.wsite-button .wsite-button-inner:hover, .wsite-editor .wsite-button .wsite-button-inner:hover {
background:#44331b !important;
color:#fff !important;
}
</style>
<style>
.hamburger-line, .menu-text
{
background-color: #44331b !important;
color: #44331b !important;
}
</style>

[BJ5 · Accepted solution]

Ahh, my bad. Try this:

<style>
.hamburger-line
{
background-color: #44331b !important;
}
.menu-text
{
color: #44331b !important;
}
</style>

[freebirdpaperie]

Thank you, thank you, thank you!

[jonathanepf]

hi guys, 

I'm using this same theme but haven't been able to change the color of the font in my menu bar. I have tried adding the following to my SEO -> Header Code: 

<style>
.menu-text
{
color: #e6c875 !important;
}
</style>

Do you have any ideas what could be happening here? 

Thanks

[Adam7]

What's the address of your site, @jonathanepf? That'll help with troubleshooting.

[jonathanepf]

hi @Adam

http://roboseeds.weebly.com

I'm just starting to work on it but as I mentioned, I'm having some trouble changing the color of the font in the menu bar as well as with the size of the logo (I'm trying to make a bit smaller than what it is). 

thanks for your support. 

Jon

[christinejensen]

Having the same problem w/ a black hamburger against a very dark grey ribbon atop the mobile page.

Tried all suggestions on this forum string, but nothing worked.

Help! Thanks!
Chris

breezewaysweets.com

[Bernadette3]

Hi @christinejensen Cute cookies! 

I see what you mean on the mobile site, but I'm not sure if it has to do with the custom theme. Do you remember what html/css changes you made to the theme? 

[christinejensen]

Thanks, Bernadette. Appreciate that encouragment!

If you look at the entirety of this forum thread, I've tried each of the fixes one at a time, deleting the changes prior to trying the next fix.

If it doesn't have anything to do w/ the theme, then I don't understand why the css changes won't take.

[SteVogliotti]

Hello.
One question, how did you get the word "MENU" to appear next to the burger menu? I'm trying, but I can't. Thank you.

---

@freebirdpaperie wrote:

[Note: The title of this post has been edited by a moderator.]

Hi all! Trying to change out the hamburger menu image (who knew that thing was called a hamburger?! lol), as it appears changing the color of it isn't possible (because it's an image). I'm using the Spotlight Theme for this site: www.BodmerFamilyFootcare.com

Another helper in a separate forum told me the following (and I need further assistance doing this):

"The hamburger image file is likely a global resource stored outside of the theme. The way to get around it would be to upload your own hamburger image, then add a CSS rule to specify the element use that image instead."

So the big question is: where exactly is this snippet in the CSS for me to add in my custom image, and how/where do I put my image online to then insert into the CSS? Relative newbie to coding, etc., but I can follow directions very well. Thank you in advance!

---