html-css-course icon indicating copy to clipboard operation
html-css-course copied to clipboard

Scrolling issue in Mobile View while navigation menu is opened

Open gaurav-js-dev opened this issue 3 years ago • 1 comments

https://user-images.githubusercontent.com/23628920/126806761-6e22fd89-b1ec-4350-b7ca-a4fdea5bbe13.mp4

I am still able to scroll after opening the burger menu in mobile view (small screen) and it also creates weird effect in background. Please refer to the attached video for working proof of concept.

gaurav-js-dev avatar Jul 23 '21 15:07 gaurav-js-dev

Instead of using position: absolute use position: fixed in the the selector .nav-open .main-nav. Basically it gets positioned the same way as absolute position does but it remains in fixed position no matter the scroll, so that you won't get that small gap at the bottom, it will always be taking 100vh. I find it really unusual when being able to scroll background when the navigation is active, you can use some javascript and css to prevent scrolling when navigation is open.

AayushKarna avatar Sep 12 '21 09:09 AayushKarna