Change logo and hamburger menu color when menu is open

[Goderd]

Hi all,

I would like to change the color of my logo and also the color of my hamburger menu when it's open. Could someone tell me how to go about that?

https://preview.webflow.com/preview/iamreddogv6?preview=755a56092a6cb497abbb39f78278cf95

Thanx!

[vincent]

Your logo is an image so to change its color, upload a new logo.

If you want to change the color of a logo on the fly in Webflow there are 2 possibilities:
* make the logo as a font
* use inline svg with custom css

Both are tricky.

For the burger, if you were using the original Webflow burger icon, that would be easy. but you broke it down into a burgergroup and sub elements, so it's a bit more tricky.

The only thing that change when you open the menu is the menu item gets a class Open. That's the only thing we can change. But you declared colors on the sub ojects so we cant do that. And we can't unse inheritance because if we give a colored bg to the Menu element, il will inherit but also draw a colored bg on it...

The webflow original menu use an icon, it's considered as a text character so we can declare the text color on the menu and have it inherit by the icon. So it's easy to change for the Open state

[rossvh]

I've come across this problem in the past with changing the color of a custom hamburger, and you'll be glad to know it's very simple

Step One is to make all the hamburger lines relative:

Next, we'll need to add a new div block to each of the hamburger lines:

Give the div block the following styles:
Position: Absolute,
Left: 0, Right: 0, Top: 0, Bottom: 0,
Background-Color: Whatever you desire,
Opacity: 0%
Screen shot below:

With that set up, we'll need to add an interaction to the navbar.

Simply click the navbar field, go to the interactions panel and create a new interaction. When selecting the type of trigger, click Navbar. Add 'Line Background' to the 'Affect Different Elements' field. On Navbar Open, set Opacity to 100% and on Navbar Close, set Opacity to 0%:

And that should be it! Hope I explained it easily but if not I'm willing to answer your questions

PS liking your transition of the lines from open to close

[Goderd]

Hi Rossvh,

Thank you for that. Although you explained it really well it still does't work...can you maybe see what I am
doing wrong?

Thanx!

https://preview.webflow.com/preview/iamreddogv6?preview=755a56092a6cb497abbb39f78278cf95

[rossvh]

Hi Goderd,

You've given the background a transparent setting, select a color. Then scroll to the bottom and set the opacity to 0%:

(Click on the screenshot to expand it)

You've set everything else up correctly so doing this will (hopefully) work this time

[Goderd]

Thank you!!! Works like a charm now!

[rossvh]

You're very welcome Goderd!

[system]

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.