How do I darken the rest of the page behind a Dropdown menu?

Hi all,

I’m trying to create an effect where the page around & behind a dropdown menu darkens after the user clicks on the item. Here’s an example: Women's Clothing | Women's Fashion | M&S.

If you click on the women item, a mega menu appears and the rest of the page darkens to provide important contrast. Thanks to help from past forum convos, I was able to create a mega menu. However, I don’t know how to make the rest of the page darken.

I’m new to this and don’t know how to code. Any assistance would be greatly appreciated.

Many thanks! This product & community has been extremely helpful.

Hi @euzo

For get the effect that you want, you will need to create a semitransparent layer which will have Z-index less than menu, but higher than rest of content.

For this

  • add a div (right before or after navigation bar),
  • give it position fixed, size fill, 100% high, background color and transparency
  • check Z index
  • initial make opacity 0%, when dropdown menu open this div will become opacity 100% (probably it will need interaction)

And I would recommend to do all this after all your site will be ready. Other way div will cover your content and it will be hard to add and change something.

Cheers,
Anna

2 Likes

Thanks a lot Anna! You guys (both webflow staff & all you generous community experts) are fantastic.

2 Likes

Always welcome :smiley: Glad I can help.

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