Div wont move into place-CodePudding

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>

CodePudding user response：

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  onclick="menuOpen()">
  <div id="btnL1"></div>
  <div id="btnL2"></div>
</div>

Notice that you no longer need the wrapper div <div > neither the class .menuBtn:after