Solved: How do I change the color of the hamburger mobile ...

freebirdpaperie · ‎05-03-2017

[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 · ‎05-03-2017

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.

View Best Answer >

BJ5 · ‎05-03-2017

Ahh, my bad. Try this:

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

View Best Answer >

BJ5 · ‎05-03-2017

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 · ‎05-03-2017

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 · ‎05-03-2017

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 · ‎05-03-2017

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

Adam7 · ‎05-03-2017

All thanks should go to @BJ for this.

freebirdpaperie · ‎05-03-2017

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:

.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 · ‎05-03-2017

Ahh, my bad. Try this:

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

freebirdpaperie · ‎05-03-2017

Thank you, thank you, thank you!

jonathanepf · ‎05-07-2017

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:

Do you have any ideas what could be happening here?

Thanks

Adam7 · ‎05-07-2017

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

jonathanepf · ‎05-07-2017

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 · ‎12-22-2018

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 · ‎12-22-2018

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 · ‎12-22-2018

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 · ‎01-02-2021

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!

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