Streaming live at 10am (PST)

Closing menu disables scroll

Hey,

I found one more issue on website which I made. When we click on the hamburger menu it’s scrolling page up by itself and when we close the menu it disables scrolls, so I have to refresh the whole page to be able to scroll again. I tried to solve it but I can’t really figure out why it’s happening.

Btw. The issue appears is only on Published page (particular history & o mnie), on preview it works how it should.

https://www.dariabokowy.pl/o-mnie
https://www.dariabokowy.pl/historie/na-wzgorzu


Here is my public share link: https://preview.webflow.com/preview/daria-bokowy-370786fefef193f71be2211327?utm_medium=preview_link&utm_source=designer&utm_content=daria-bokowy-370786fefef193f71be2211327&preview=5e6b972da4da61d63786a0ecb2917baf&pageId=5d404c1a03c3fe1a2f29c65c&mode=preview

Change .hero-about from fixed to relative. And remove .header-placeholder div. Now it works.

EDIT: Scratch that. Your body element is being set to “overflow: hidden” when clicking the menu. You need to remove whatever adds “overflow: hidden” to your body element. This is also why it scrolls to the top of the page, every time you click it.

1 Like

The body is set to “overflow:hidden” when the menu is being opened to lock the scroll. It’s the solution which I found here on the forum, otherwise, users were able to scroll the page when a menu is open. It’s causing this issue only on these two pages which I attached here, rest works fine with scroll.

Also, I can’t really change positioning to relative because it will ruin way how text section is covering header. :confused:

Don’t know who came up with that idea, but that is never a good solution. And the user being able to scroll, while the menu is open, is MUCH better then making a jump to the top of the page. Being able to scroll content under the menu is totally normal. You will also experience that on sites who won SOTD (Site Of The Day) on sites like Awwwards.

I would remove it for a much better experience.

It was not jumping before, I can’t figure out why it stopped working and now there is a jump & scroll is locking.

Here it works pretty well: https://www.dariabokowy.pl/historie (opens and closes in same place, scroll is disabled)

Just use the fix above then… You will not get the scroll over effect if you use the “overflow:hidden”.

Again, personally, i would just remove the “overflow: hidden”. There is nothing wrong with the user being able to scroll while the menu is open.

1 Like

It’s just irritating on mobile. :stuck_out_tongue: But I can always use 100% opacity for the open menu.

Thanks for the help, I hoped that there will be some way to make both works. :<