Streaming live at 10am (PST)

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:

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.


1 Like

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


Always welcome :smiley: Glad I can help.

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