Problems with menu - html

Question

Is there a way so that when I open my menu, it does not go beyond the first section or scrolling will be disabled once the menu is open? I tried giving every section z-index 999 but that does not work
HTML:
<section class="intro">
<label>
<input type="checkbox">
<span class="menu">
<span class="hamburger"></span>
</span>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</label>
<div class="text">
<h1>my<br>example<br>text</h1>
</div>
</div>
</section>
<section class="first">
</section>
<section class="second">
</section>
<section class="third">
</section>
CSS:
/* Section styling */
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
section {
width: 100%;
display: table;
margin: 0;
max-width: none;
height: 100vh;
}
.intro {
background-color:#291411;
}
.first {
background-color:#834940;
}
.second {
background-color:#291411;
}
.third {
background-color:#834940;
}
/* Hide scrollbars */
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
/* Menu before */
label .hamburger {
position: absolute;
top: 135px;
left: 50px;
width: 30px;
height: 2px;
background: #291411;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #291411;
}
label .hamburger:before { top: -10px; }
label .hamburger:after { bottom: -10px; }
label input { display: none; }
label input:checked + .menu {
box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7;
border-radius: 0;
}
label input:checked + .menu .hamburger {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked + .menu .hamburger:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label input:checked + .menu + ul { opacity: 1; }
/* Menu after */
label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 100;
width: 200px;
height: 200px;
background: #E0C9B7;
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
box-shadow: 0 0 0 0 #E0C9B7, 0 0 0 0 #E0C9B7;
cursor: pointer;
}
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
list-style-type:none;
}
label a {
margin-bottom: 1em;
display: block;
color: #291411;
text-decoration: none;
}
/* Footer styling */
footer {
padding: 1% 5%;
text-align:center;
background-color: #291411;
color: #E0C9B7;
}
To disable the scroll when the menu is open I tried to add overflow-x:hidden to the html and body but this makes the whole page weird

Answer 1

Did a simple solution with jquery, you can do this with javascript. I used jquery just to save time.
$(".js-change").on("change", function() {
$("html").toggleClass("menu-open");
});
/* Section styling */
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
section {
width: 100%;
display: table;
margin: 0;
max-width: none;
height: 100vh;
}
.intro {
background-color:#291411;
}
.first {
background-color:#834940;
}
.second {
background-color:#291411;
}
.third {
background-color:#834940;
}
/* Hide scrollbars */
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
/* Menu before */
label .hamburger {
position: absolute;
top: 135px;
left: 50px;
width: 30px;
height: 2px;
background: #291411;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #291411;
}
label .hamburger:before { top: -10px; }
label .hamburger:after { bottom: -10px; }
label input { display: none; }
label input:checked + .menu {
box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7;
border-radius: 0;
}
label input:checked + .menu .hamburger {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked + .menu .hamburger:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label input:checked + .menu + ul { opacity: 1; }
/* Menu after */
label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 100;
width: 200px;
height: 200px;
background: #E0C9B7;
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
box-shadow: 0 0 0 0 #E0C9B7, 0 0 0 0 #E0C9B7;
cursor: pointer;
}
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
list-style-type:none;
}
label a {
margin-bottom: 1em;
display: block;
color: #291411;
text-decoration: none;
}
/* Footer styling */
footer {
padding: 1% 5%;
text-align:center;
background-color: #291411;
color: #E0C9B7;
}
.menu-open,
.menu-open body {
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="intro">
<label>
<input type="checkbox" class="js-change">
<span class="menu">
<span class="hamburger"></span>
</span>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</label>
<div class="text">
<h1>my<br>example<br>text</h1>
</div>
</div>
</section>
<section class="first">
</section>
<section class="second">
</section>
<section class="third">
</section>