Съехала полоска гамбургера на сайте, как исправить?
<input type="checkbox" id="menu">
<label for="menu" class="menu-mobile">
<div>
<nav role="navigation">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</nav>
</div>
</label>
#menu {
visibility: hidden;
}
label {
position: fixed;
top: 4%;
left: 75%;
width: 50px;
height: 3px;
background: black;
cursor: pointer;
transition: 0.6s;
z-index: 10;
}
label:before {
content: "";
position: absolute;
width: 50px;
height: 3px;
margin: 0;
padding: 0;
background: black;
transition: 0.6s;
transform: translateY(10px);
z-index: 99;
}
label:after {
content: "";
position: absolute;
width: 50px;
height: 3px;
margin: 0;
padding: 0;
background: black;
transition: 0.6s;
transform: translateY(-10px);
}
label div {
position: fixed;
display: none;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
margin: 0;
padding: 0;
opacity: 0;
transition: display 2s ease-in-out;
}
div label nav {
position: relative;
width: 30%;
margin: 20% auto;
}
label div nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
label div nav ul li {
margin: 15px 0;
text-align: center;
}
label div nav ul li a {
display: inline-block;
font-size: em(24);
font-weight: 300;
text-decoration: none;
color: white;
padding-bottom: 3px;
}
label div nav ul li a span {
position: relative;
display: block;
cursor: pointer;
color:black;
font-weight: bold;
}
label div nav ul li a span:before, label div nav ul li a span:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
top: 50%;
margin-top: -0.5px;
background: #f1c40f;
}
label div nav ul li a span:before {
left: -15%;
}
label div nav ul li a span:after {
right: -15%;
background: white;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
label div nav ul li a span:hover:before {
background: #f1c40f;
width: 130%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
label div nav ul li a span:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
#menu:checked + label {
width: 0;
}
#menu:checked + label div {
display: block;
background: white;
opacity: 0.9;
transition: opacity 2s linear;
}
#menu:checked + label div:before, #menu:checked + label div:after {
filter: blur(5px);
}
#menu:checked + label:before {
background: black;
transform: rotate(45deg) translate(0px);
}
#menu:checked + label:after {
background: black;
transform: rotate(-45deg) translate(0px);
}
