Navigation MegaMenu with two alternating background colours and logos

Design help Animations & Interactions
1

Hi

I wonder if anyone can shed some light on my problem. I have a nav that opens a mega menu; the mega menu is built using the dropdown component. That all works great, but the problem I have is that I need the nav to initially have a transparent background colour in the nav with a white logo (to show content/image beneath), but when it’s open, it needs to be a solid white background colour with a coloured logo. I have built this with a pal of mine, but we cannot get around an issue created by the Java that Webflow uses (I think?).

So if the dropdown is opened initially and closed or closed from opening another dropdown, it works great, but if I click somewhere in the nav area, it also closes the dropdown. Then if I re-open the dropdown from a dropdown link, it has removed the white background colour.

Here’s the link to see what’s happening:
https://bms-progress.webflow.io

Here’s a link to a version I made is square space a while ago, I basically want to create this nav functionality in webflow:
https://www.bmsprogress.com/

Any help would be really, really appreciated.
Thnks

Here is my public share link: LINK
(how to access public share link)

2

Hello,

With the new component function it’s simple.

For the logo, simply select the image and create a variability.
W

As the system to vary the properties doesn’t exist yet, you just have to use an image for the background of the navbar (small and solid color) and as it’s an image you can use the variability to change the image and have two navbars of different color.

3

Hi Romuald

Thanks for your reply.

Do you mean to use an image to create a solid white background colour? and set it to hidden when I want it transparent?

this is the live link: Webflow - BMS Progress

would what you suggested work with this build?