Hello, I have a responsive nav bar and I want to make a burger icon appear (two divs) when the breakpoint is 640px, but it doesn’t work. Maybye is sth wrong with the position of my divs?
Thanks in adavnce for your help!
<div class="about-page">
<div class="sous-menu-burger">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="cont-main">
<div id="menuMobile" class="menuMobile">
<a href="#"><div class="home-a">Home</div></a>
<a class="active" href="#"><div class="about-a">About</div></a>
<a href="#"><div class="skills-a">Skills</div></a>
<a href="#"><div class="projects-a">Projects</div></a>
<a href="#"><div class="contacts-a">Contacts</div></a>
</div>
<div class="contText">
<div class="titre">About</div>
</div>
</div>
.menuMobile {
position: absolute;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 35%;
height: 62%;
}
@media only screen and (max-width: $sm) {
.line {
width: 30px;
height: 30px;
margin: 50px;
margin-left: 10%;
margin-top: 50%;
color: aliceblue;
}
.about-page {
position: relative;
}
.sous-menu-burger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 1000;
}
.menuMobile {
position: fixed;
background-color: black;
height: 100%;
width: 100%;
margin-left: 0%;
margin-top: 0%;
padding-left: 21%;
padding-top: 33%;
animation: run 1s cubic-bezier(0.3, 0.46, 0.45, 0.94);
}
@keyframes run {
0% {
right: 0%;
}
100% {
right: 100%;
}
}
.menuMobile.open {
animation: run 1s cubic-bezier(0.3, 0.46, 0.45, 0.94);
}
@keyframes run {
0% {
right: 100%;
}
100% {
right: 0;
}
}
}