This is my first post here so I apologize if it's in the incorrect format.

I am making a website using HTML, CSS, and a tiny bit of JavaScript; I am creating the home page. In that page I created a hamburger menu, that – when it opens up – you can see the list of "Home," "Contact," "Features," etc. That part is perfectly fine.

I then wanted to add some content boxes underneath the video. My code for that was correct; however, when I went on my site I couldn't see any of the boxes that I had created, but when I opened the hamburger menu I saw that the boxes and text were in there.

How can I make it so that it isn't in the menu and is at the bottom instead? Please help.

I attached an image to show how it looks:

const menuToggle = document.querySelector('.toggle')
const showCase = document.querySelector('.showcase')

menuToggle.addEventListener('click', () => {
  menuToggle.classList.toggle('active')
  showCase.classList.toggle('active')
})

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.showcase {
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: black;
  color: white;
  z-index: 2;
  transition: 0.8s;
}

.showcase header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  text-transform: uppercase;
  cursor: pointer;
}

.toggle {
  position: relative;
  width: 60px;
  height: 60px;
  background: url('menu.png');
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}

.toggle.active {
  background: url('menu.png');
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
}

.showcase video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.showcase.active {
  right: 300px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #03a9f4;
  mix-blend-mode: overlay;
}

.text {
  position: relative;
  z-index: 10;
}

.text small {
  font-size: 30px;
  line-height: 1em;
}

.text h1 {
  font-size: 3em;
  font-weight: 700;
  line-height: 1em;
}

.text a {
  display: inline-block;
  font-size: 1em;
  background: white;
  padding: 10px 30px;
  text-decoration: none;
  color: black;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.3s;
}

.text a:hover {
  letter-spacing: 6px;
}

.social {
  position: absolute;
  bottom: 20px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social li {
  list-style: none;
}

.social li a {
  display: inline-block;
  filter: invert(1);
  margin-right: 20px;
  transform: scale(0.7);
  transition: 0.5s;
}

.social li a:hover {
  transform: scale(0.5) translateY(-20px);
}

.menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu ul {
  position: relative;
  list-style: none;
}

.menu ul li a {
  text-decoration: none;
  font-size: 25px;
  color: black;
}

.menu ul li a:hover {
  color: #03a9f4;
}

@media(max-width: 991px) {
  .showcase,
  .showcase header {
    padding: 40px;
  }
  .text small {
    font-size: 20px;
  }
  .text h1 {
    font-size: 2em;
  }
}

.boxes .container {
  display: flex;
  justify-content: space-between;
}

.box {
  flex: 1;
  background: #0a51cc;
  color: white;
  border-radius: 10px;
  margin: 20px 10px;
  box-shadow: 0 3px 5px black;
  padding: 15px 20px;
}

@media (max-width: 768px) {
  .header .container {
    flex-direction: column;
    padding-top: 20px;
    text-align: center;
  }
  .boxes .container {
    display: block;
    text-align: center;
  }
}

<section >
  <header>
    <h2 >Blizzard Notify</h2>
    <div ></div>
  </header>

  <video src="snow.mp4" muted loop autoplay></video>

  <div ></div>

  <div >
    <small>Welcome to Blizzard Notify</small>
    <h1>A discord server.</h1>
    <a href="#">Explore</a>
  </div>

  <ul >
    <li>
      <a href="#"><img src="instagramlogo.png"></a>
    </li>
    <li>
      <a href="#"><img src="twitterlogo.png"></a>
    </li>
  </ul>
</section>

<div >
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<br>
<br>

<h1 id="features">
  Features
</h1>

<section >
  <div >
    <div >
      <h2>Detailed Guides</h2>
      <p>Dummy Text</p>
    </div>

    <div >
      <h2>Raffles</h2>
      <p>Dummy Text for Now.</p>
    </div>

    <div >
      <h2>Lowkey Flips</h2>
      <p>Dummy Text for now.</p>
    </div>
  </div>
</section>

I tried to get rid of the JavaScript, but that didn't help; I also tried to add some space between the elements but nothing happened. I then tried to see if my CSS was wrong, but it all seemed good. I truly don't know what I did wrong.

CodePudding user response：

Adding position: relative property to your .boxes div could fix the problem because it gives element the position by the normal flow of the document.

In your CSS, you didn't assign anything to your .boxes container, so in default it is set to static, causing your issue.

body{
    overflow-y: "scroll"; (this is optional.)
}
...
.boxes{
     position: relative
}
...

Also, I noticed that you use inline <script>. For best practices, please make sure it is at the end of your <body> for improved performances.

Check codepen for effect. https://codepen.io/anthonyzhang220/pen/PoEOebw