How do I stop horizontal scroll on full screen menu?

Design help General
1

Following this tutorial by @PixelGeek and it all works great - except for on mobile there is now a horizontal left/right scroll when the menu is open.

Any ideas on how I might stop this from happening?

Here is my site Read-Only: https://preview.webflow.com/preview/indexdepartment?utm_source=indexdepartment&preview=53d0a382799b42245f4bb5a67c0b6dcb

2

Your Div Block 11 needs ‘overflow hidden’, you seem to have it set to always show scrollbar

3

@RugbyWebDesign hey thanks, that works but it also cuts off the vertical scroll?

4

Ah, I see that its inheriting a Position ‘Fixed’ from the desktop. Simply change this back to static.

1 Like
6

Thanks this worked but the design/layout I have in mind would not work as well if the menu is not fixed as the user scrolls.

Is there anyway to fix the overflow issue but keep the button fixed rather than static?

7

Your Div Block 11 needs ‘overflow hidden’, you seem to have it set to always show scrollbar

@RugbyWebDesign hey thanks, that works but it also cuts off the vertical scroll?

Just tried this again and it does not cut off the vertical scroll. Weird :slight_smile:

8

Hey @indexdepartment Happy to try and help you, but you need to more clear in what you are trying to achieve?

Your class Rich Text Block has been set to Overflow: Always display scrollbar. This class is cascading down through the view-ports.

Why does this RTE need this class property?

1 Like
9

Why does this RTE need this class property?

Hi @RugbyWebDesign it doesn’t. In trying getting this to work I pressed “all of the buttons” and I must have forgot to reset this. Thanks for pointing it out.

It all seems to work now, the horizontal scroll on the mobile view has now gone.

For reference I saw this and wanted to first, try and recreate a basic version of the side menu and take it from there.

10

Noticed another issue now. Everything works as is the way I wanted - when I use the touchpad on laptop - scrolling up down using mouse will not work. Mouse itself is working fine on any other site.

11

Cool.
Your main page content needs to all be wrapped in a DIV (lets call it “content-wrapper”) and set to 100% width. Give it a Z index of say 100 (to bring it above the menu.

Your menu also needs to be wrapped in a DIV (“menu-wrapper”) again give it a 100% width and set position FIXED. (it should be hiding under the “content-wrapper”)

Use the interaction trigger on your Blue Button to get the panels sliding. At the moment you have show/hide. Change these to use the MOVE function.

  • Set the “content-wrapper” to have an initial state of X axis = 0 and an animation to move 100VW
  • Set the “menu-wrapper” to have an initial state of X axis = -50VW and an animation to move to 0.

Its then just a matter of adjusting speed and timings to taste. - Hope that gets you on the right track!

1 Like
12

Perfect. This is just what I was looking for. I spent so much time messing around with it that everything began to get mixed up. Thanks a million for your time and help!

1 Like