Possible to darken site with overlay when off-canvas menu open?

Design help Animations & Interactions
1

How can I darken the site when the off-canvas menu is open and activated? This provides a nice effect where the focus is on the nav menu after it’s pressed.

The off-canvas nav menu and site right here are a perfect example. Notice how the background darkens on the main site when the hamburger button is pressed. If you inspect the element, there appears to be a div with an ID of “menu-overlay” that’s making this effect possible.

Is this something that can be done in Webflow?

2

I don’t think you can do this with the regular menu component but you can with interactions. You’ll need to create a div for the menu and a button and trigger the showing of the div via interactions. Then also trigger an overlay div underneath the menu div to show as well when the button is pushed. You will need to use Z index to control what’s on top of each other.

3

So, I should look to building a custom off-canvas menu (instead of using the Webflow version)? I noticed Step 6 of this tutorial delves into this topic.

4

You should be able to do what you want with the pre built menu.

There is a interaction trigger for when the menu is open or closed.

You use the interaction the effect other elements depending on the state of the menu.

1 Like
5

Thanks @AlexN! Is there a way to apply an interaction to everything outside of the menu? Like the body, without the menu?

And how would the overlay effect be achieved? With code? Or through the interactions/overlay options in Webflow?

6

What I have done in the past is to wrap the pages content in a single div. The menu is placed outside of the div. In my case I put a darker background on the body and just slightly faded the warping div when the menu was open.

1 Like
7

Thanks again, @AlexN. I followed you method and was able to adjust the opacity of the single div with an interaction trigger when the menu was open. But, I’m still confused as to how to darken.

I see the option to adjust the opacity, but that tends to make things a bit more light and faded rather than dark. I don’t know how to temporarily put a darker background on something, as you mentioned you did with the body. Is that possible in Webflow?

8

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