Disable scrolling when pop up open and menu not showing on mobile

user_17597779 0
Viewed 271

thanks for looking into my issue

I am creating a website: http://testgod0312.000webhostapp.com/ , all the css are separate by blocks so that it is easier for you to potentially help me (in assets folder).

  1. when you go to map and click on a button, a pop up shows up, but you can keep on scrolling. The button is only coded in css (no js), everything in the map.css file - any idea how to disable overflow without resorting to js? if using js, what would you do as there is no function capturing the opening / closing of the box?

  2. I have a menu (click top right corner), works fine on laptop but on mobile, it shows only 50% of it. The code is in nav.css; with the responsive at the bottom. Any idea on how to display it all?

thanks in advance!! fafa

css html javascript
1 Answers

#1 can't be solved without javascript as long as browsers are not supporting css:has(). So the only way is to apply a class or a style="overflow: none;" to the body as soon as a popup gets opened and remove it after it was closed. The very same happens already if the menu is opened/closed.

A very small code snippet would be enough:

window.addEventListener("hashchange",
  () => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup'))
);

and CSS

body.popup-open {
  overflow: none;
}

About #2 inside the nav.css the values applied before the media query (@media all and (max-width: 767px) {) cause the issue.

The menu__right changes from flex to none on small screens. And menu__left still has the right 50% value applied for bigger screens, So adjusting this value inside the media query to 0% solves it.

    .menu__left {
        right: 0%;
        width: 100%;
    }
user_103048040
Related