Two navigation bars, need to click 2 times to close element

Design help Animations & Interactions
1

I have trouble with the interactions of my navigation bar. I want it to act as the one on PCSCHEMATIC: Electrical CAD software. Cable routing software. that it turns white when I press product, and goes back to the normal navigation bar when I exit the menu. For exiting the menu I need to press twice on the navigation bar again to go back. I understand this is a problem with the 2nd click interaction, but how can I solve this? Any other pointers for achieving the same navigation bar as the site I linked would be highly appriceated.

Here is my public share link: https://prototype-pcschematic-12bba4.webflow.io/
Here is my read-only link: https://preview.webflow.com/preview/prototype-pcschematic-12bba4?utm_medium=preview_link&utm_source=designer&utm_content=prototype-pcschematic-12bba4&preview=e9dbd42e279becad0082b7a0ab8870c4&mode=preview

2

Hey @Simen_Webflow,
You should be able to go for that by using dropdowns rather than links, and instead of setting interaction to happen on 1st and 2nd click you can do dropdown open and dropdown closes. Let me know if this helps.

Screen Shot 2021-02-15 at 1.16.07 PM
Screen Shot 2021-02-15 at 1.16.07 PM2824×1050 218 KB

3

Thank you, I will try this out and see if it works :slight_smile:

4

Now I’ve change the links to be dropdowns instead, but it seems difficult to be able to control the colors on the navigation bar when its open. Do you have any tips on how I can make this possible?