jonasschmedtmann/html-css-course

Scrolling issue in Mobile View while navigation menu is opened

gaurav-js-dev opened this issue · 1 comments

Proof.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.

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.