I can not put menu above the text

Question

I can not put menu above the text

Navigation

#1 by (3 votes)

0

   function toggleSidebar(ref) {
  ref.classList.toggle('active');
  document.getElementById('sidebar').classList.toggle('active');
}

    #sidebar {
  position:absolute;
  
  top:0px;
  right:0px;
  width:600px;
  height:100vh;
  background:#1a1a1a;
  text-align:center;
  transform-origin:right;
  transform:perspective(1200px) rotateY(90deg);
  transition:all 400ms ease;
}
#sidebar ul li {
  color:#ccc;
  font-size:20px;
  width:100%;
  height:50px;
  border-bottom:1px solid #222222;
  line-height:50px;
}
#sidebar.active {
  transform:perspective(1200px) rotateY(0deg);
}



#toggle-btn {
  position:absolute;
  right:30px;
  top:20px;
  transition:left 200ms linear 0ms,transform 300ms ease 100ms;
}
#toggle-btn.active {
  right:auto;
  transform:rotate(360deg);
}
#toggle-btn span {
  position:relative;
  top:0px;
  display:block;
  background:#1a1a1a;
  width:30px;
  height:5px;
  margin:5px 0px;
  cursor:pointer;
  transition:transform 300ms ease 200ms;
}
#toggle-btn.active span:nth-child(1) {
  top:10px;
  transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
  opacity:0;
}
#toggle-btn.active span:nth-child(3) {
  top:-10px;
  transform:rotate(-45deg);
}

If you have questions, link

html5 css

asked by anonymous 21.05.2018 / 20:33

1 answer

How to proceed with batch execution for python methods PHP script increment

score 3 · Accepted Answer

As you are working with position:absolute and you are not declaring z-index , the browser will stack your divs as they are declared in your html. Add the z-index: 2000; attribute in the css of #sidebar . (2000 is an arbitrary number and I put a high value just for the example)

function toggleSidebar(ref) {
  ref.classList.toggle('active');
  document.getElementById('sidebar').classList.toggle('active');
}

#sidebar {
  position:absolute;
  
  top:0px;
  right:0px;
  width:600px;
  height:100vh;
  background:#1a1a1a;
  text-align:center;
  transform-origin:right;
  transform:perspective(1200px) rotateY(90deg);
  transition:all 400ms ease;
  z-index: 2000;
}
#sidebar ul li {
  color:#ccc;
  font-size:20px;
  width:100%;
  height:50px;
  border-bottom:1px solid #222222;
  line-height:50px;
}
#sidebar.active {
  transform:perspective(1200px) rotateY(0deg);
}



#toggle-btn {
  position:absolute;
  right:30px;
  top:20px;
  transition:left 200ms linear 0ms,transform 300ms ease 100ms;
}
#toggle-btn.active {
  right:auto;
  transform:rotate(360deg);
}
#toggle-btn span {
  position:relative;
  top:0px;
  display:block;
  background:#1a1a1a;
  width:30px;
  height:5px;
  margin:5px 0px;
  cursor:pointer;
  transition:transform 300ms ease 200ms;
}
#toggle-btn.active span:nth-child(1) {
  top:10px;
  transform:rotate(45deg);
}
#toggle-btn.active span:nth-child(2) {
  opacity:0;
}
#toggle-btn.active span:nth-child(3) {
  top:-10px;
  transform:rotate(-45deg);
}