Streaming live at 10am (PST)

How can I make the Side (Left) Nav Bar pushing the body when it appears on scroll?


#1

Hello !
I have a Side Nav Bar fixed to the left and I would like to know how to make it push the body to the right when it appears on scroll or click on a trigger. Here is the closest example I could find : http://tympanus.net/Blueprints/SlidePushMenus/
Is it possible to do in Webflow ? I would also like it if the body was responsive when it is being pushed on the right, in other words, I would like to avoid the "croping" effect the pushing does on the body.

It looks very complicated to do in Webflow, even if the responsiveness cannot be done, I can't figure it out alone...
Can anyone help me please ?
I'm relatively new to Webflow and I'm already addicted to it !
Thank you !


#2

And there's no rehab for that yet wink

When I was making this: https://webflow.com/website/People-Wish-A-layout-with-Webflow I had the same kind of problematic: the body had to move to the right with the fullscreen popup coming from the left.

The first thing to think about: you don't want the displacement of the body causing any scroll to the right. So you need to hide the overflow. The body then can not directly host the content. The content has to be nested in a div under the body. And as you can't give the body overflow:hidden, as it will block the vertical scroll of your site, you have to nest it twice. So put a div under the body, with overflow:hidden property, and put another div inside this div, that will host the content and move to the right without causing overflow. You can call this div "main content" for example.

Now add another trigger to your interaction, make it "affect another element" and call your "Main Content" element. Give it the same animation than your menu. It will then "move with" your menu, which looks exactly the same as being pushed by it.

Another solution consist of putting the menu aside the Main Content div, nesting it and Main content into a new div and shifting this last one to the left to hide the menu and play with that. I haven't tested it, it raises maybe many questions and bugs smile


#3

Thanks a lot Vincent ! Really clear information from you, I'm grateful !
Trying this as soon as I can and post how it went smiley
I'll also try your other solution which seems like a good alternative too.


#4

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