im trying to move 2 divs vertically into place and they wont move down. ive tried a couple things like adding top and bottom to the #btnL1 & #btnL2, but they dont do anything. when i try to set the position of them to absolute, they arent visible anymore, but still there. here's the link to the site im working on: https://orbiting-simulator.erodecode.repl.co
.menuBtn {
position: absolute;
width: 60px;
top: 3%;
left: 3%;
box-shadow: -12px 12px 1em 0em rgb(0 0 0 / 20%);
border-radius: 5px;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(3px);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: transform 100ms ease-in-out;
}
.menuBtn:after {
content: '';
display: block;
padding-bottom: 100%;
}
.btnL {
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
}
#btnL1 {
height: 15%;
background: darkcyan;
border-radius: 5px;
transform: rotate(45deg);
}
#btnL2 {
height: 15%;
background: darkcyan;
border-radius: 5px;
transform: rotate(-45deg);
}
<div class='menuBtn' onclick='menuOpen()'>
<div class='btnL'>
<div id='btnL1'></div>
<div id='btnL2'></div>
</div>
</div>
They are not visible because the width attribute is missing.
With this it should have the effect you are looking for:
#btnL1 {
height: 15%;
background: darkcyan;
border-radius: 5px;
transform: rotate(45deg);
width: 50px;
position: absolute;
top: 20px;
}
#btnL2 {
height: 15%;
background: darkcyan;
border-radius: 5px;
transform: rotate(-45deg);
width: 50px;
position: absolute;
top: 20px;
}
A better, cleaner solution to your HTML and CSS would be:
CSS
.menuBtn {
position: absolute;
width: 60px;
height: 60px;
top: 40%;
left: 3%;
box-shadow: -12px 12px 1em 0em rgb(0 0 0 / 20%);
border-radius: 5px;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(3px);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: transform 100ms ease-in-out;
}
#btnL1, #btnL2 {
height: 60px;
background: darkcyan;
border-radius: 5px;
transform: rotate(45deg);
position: absolute;
width: 7px;
margin: 0 auto;
left: 0;
right: 0;
}
#btnL2 {
transform: rotate(-45deg);
}
HTML
<div class="menuBtn" onclick="menuOpen()">
<div id="btnL1"></div>
<div id="btnL2"></div>
</div>
Notice that you no longer need the wrapper div <div class="btnL"> neither the class .menuBtn:after