sidebar is stuck under the content - html

Question

I tried to create responsive menu which after resizing (<992px) create hamburger menu that will roll from the right side and it will be on 100vh of website's height. Everything works but the content of the website is on top of the sidebar menu after transition. I tried to set the position to absolute or relative nothing works. Also I tried to hide the content after label is checked but it didn't work too. Any ideas how can I fix that?
Code:
/* General */
html,
body {
height: 100%;
font-size: 100%;
font-family: 'Montserrat', sans-serif;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
min-height: 100%;
}
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.main-content {
padding-top: 20px;
padding-bottom: 50px;
}
footer {
height: 50px;
margin-top: -50px;
background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
/* Menu */
.menu {
width: 100%;
height: 58px;
}
.menu-items ul {
float: right;
}
.menu-items ul li {
display: inline;
padding: 20px;
list-style: none;
}
.menu-items ul li a {
line-height: 75px;
font-weight: 300;
color: #000;
text-decoration: none;
}
.menu-items ul li a:hover {
color: #4956cc;
transition: 0.1s
}
.menu-items ul li a.active {
color: #ffa136;
}
.logo-place {
line-height: 75px;
display: inline;
float: left;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 85px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media (max-width:992px) {
.checkbtn {
display: block;
}
.menu-items ul {
position: fixed;
width: 100%;
height: 100vh;
top: 80px;
right: -100%;
background: #000;
text-align: center;
transition: all .5s;
}
.menu-items ul li {
display: block;
margin-top: 10px;
}
.menu-items ul li a {
font-size: 20px;
color: #fff;
}
#check:checked~.menu-items ul {
right: 0;
}
}
/* Welcome-section */
.welcome-section {
background-color: red;
}
.welcome-section h1 {
color: #fff;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="wrapper">
<div class="menu container">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo-place">
<img src="img/logo.png" alt="">
</div>
<div class="menu-items">
<ul>
<li><a class="active" href="index.html">My Story</a></li>
<li>Blog</li>
<li>Contact</li>
<li>Instagram</li>
<li>Linkedin</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="welcome-section">
<div class="container">
<div class="portrait">
<img src="img/portrait.png" alt="">
</div>
<h1>bla bla bla bla bla <br> bla bla bla.</h1>
</div>
</div>
</div>
</div>
<footer></footer>

Answer 1

You need to give the sidebar a z-index:
.menu-items ul {
float: right;
z-index: 999; /* Insert this line */
}
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
Source: MDN
/* General */
html,
body {
height: 100%;
font-size: 100%;
font-family: 'Montserrat', sans-serif;
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
min-height: 100%;
}
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.main-content {
padding-top: 20px;
padding-bottom: 50px;
}
footer {
height: 50px;
margin-top: -50px;
background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
/* Menu */
.menu {
width: 100%;
height: 58px;
}
.menu-items ul {
float: right;
z-index: 999;
}
.menu-items ul li {
display: inline;
padding: 20px;
list-style: none;
}
.menu-items ul li a {
line-height: 75px;
font-weight: 300;
color: #000;
text-decoration: none;
}
.menu-items ul li a:hover {
color: #4956cc;
transition: 0.1s
}
.menu-items ul li a.active {
color: #ffa136;
}
.logo-place {
line-height: 75px;
display: inline;
float: left;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 85px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media (max-width:992px) {
.checkbtn {
display: block;
}
.menu-items ul {
position: fixed;
width: 100%;
height: 100vh;
top: 80px;
right: -100%;
background: #000;
text-align: center;
transition: all .5s;
}
.menu-items ul li {
display: block;
margin-top: 10px;
}
.menu-items ul li a {
font-size: 20px;
color: #fff;
}
#check:checked~.menu-items ul {
right: 0;
}
}
/* Welcome-section */
.welcome-section {
background-color: red;
}
.welcome-section h1 {
color: #fff;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="wrapper">
<div class="menu container">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo-place">
<img src="img/logo.png" alt="">
</div>
<div class="menu-items">
<ul>
<li><a class="active" href="index.html">My Story</a></li>
<li>Blog</li>
<li>Contact</li>
<li>Instagram</li>
<li>Linkedin</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="welcome-section">
<div class="container">
<div class="portrait">
<img src="img/portrait.png" alt="">
</div>
<h1>bla bla bla bla bla <br> bla bla bla.</h1>
</div>
</div>
</div>
</div>
<footer></footer>

Answer 2

Add z-index: 9; to .menu-items ul which is in #media (max-width:992px)