Menu button style when open

I’d like to invert the background colour and text colour of my menu button when the menu is open on mobile so it has white text on black.

When trying to set this I am opening the menu in Settings then picking the colours I want but Webflow only remembers the last colour I selected for the text. The background colour works. Which means on mobile right now you can’t read the text (because it’s black). If I set it to white, you wouldn’t be able to read it when the menu is closed… argh!

In future, I’d also like to change the word from Menu to Closed. But that feels like another challenge for another day…


Here’s my public link:
https://vocalapp.webflow.io/

Can you share the designer link?
Check the pinned post at the top of the forum.

Yes! Sorry… first timer on the forum :slight_smile:

https://preview.webflow.com/preview/vocalapp?utm_medium=preview_link&utm_source=dashboard&utm_content=vocalapp&preview=4443df3a64927d738ac62481ce0ee351&mode=preview

Thomas
Welcome to webflow!My first question would be "why do you want to give users a different experience on desktop and mobile.

To do this you might be better off setting the Body colour and making all the headings, sections and elements transparent (apart from buttons etc.) That way you’ll have far less work and there’ll be less data (code) to download for users.

I’m keen to keep the ‘dark’ mobile nav so users are clear they’ve opened the menu and don’t have a white on white scenario with the page content.

Not sure I follow your guidance completely though…

Should I set all backgrounds as transparent? But then what would give the menu button component and the Nav-links their BG colour properties?

Hi All!

I could really do with some support on this. Everything I try fails :frowning:

Attached the two states I want to achieve as examples. But I can’t do this right now using the open/close state + styling. What else can I do??