Navigation Menu works but the rest of the website is just white

For some context, I am trying to add a hamburger navigation menu to the top right of my website. When you click on it and it expands out into a full page. Nothing crazy. This part actually works. It's all HTML and CSS, no JS. The rest of the website so far is a 3D globe use ArcGIS API for Javascript contained in a #sceneContainer. I've been playing around with this for a while but can't spot the issue.

There are two main issues:

  1. I initially added the navbar @keyframe BEFORE the scene container in the main.css file, but what would happen is that the navbar would work just fine, but it is covered up by an all-white background. I could tell the globe was still rendering because right when you refresh the website it quickly appears and gets covered up. The second part of this is...

  2. I tried putting the @keyframe AFTER the #sceneContainer which allowed the globe to become visible again, but the navbar won't open up.

Almost seems like they are overlapping each other. I want them to coexist together in the same screen where when you click on the menu it covers the whole map. I know it's probably something obvious but I'm stumped. My guess is I messed up somewhere with the sizing or something with the sceneContainer.

Any help would be super cool! šŸ™

Here is my Code:

  body {
  padding: 0;
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  font-family: 'Oswald', sans-serif;
}

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
  /* clip-path: circle(25px at calc(0% + 45px) 45px); */
  background: #000;
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
}

#active:checked~.wrapper {
  clip-path: circle(75%);
}

.menu-btn {
  position: absolute;
  z-index: 2;
  right: 20px;
  /* left: 20px; */
  top: 20px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
  background: rgb(235, 153, 86);
  transition: all 0.3s ease-in-out;
}

#active:checked~.menu-btn {
  color: #fff;
}

#active:checked~.menu-btn i:before {
  content: "\f00d";
}

.wrapper ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}

.wrapper ul li {
  margin: 15px 0;
}

.wrapper ul li a {
  color: none;
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 30px;
  color: #fff;
  border-radius: 50px;
  background: #000;
  position: relative;
  line-height: 50px;
  transition: all 0.3s ease;
}

.wrapper ul li a:after {
  position: absolute;
  content: "";
  background: #fff;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
  width: 104%;
  height: 110%;
  left: -2%;
  top: -5%;
  /* if the font is 'Oswald'*/
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  animation: rotate 1.5s linear infinite;
  transition: transform 0.3s ease;
}

.wrapper ul li a:hover:after {
  transform: scaleY(1);
}

.wrapper ul li a:hover {
  color: #fff;
}

input[type="checkbox"] {
  display: none;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  text-align: center;
  width: 100%;
  color: #202020;
}

.content .title {
  font-size: 40px;
  font-weight: 700;
}

.content p {
  font-size: 35px;
  font-weight: 600;
}

#sceneContainer {
  height: 100vh;
  width: 100vw;
  background: rgb(0, 0, 0);
}

@keyframes rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
<!DOCTYPE html>
<html>

<head>
  <title>Half Earth</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css">
  <link rel="stylesheet" href="main.css">
  <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
  <script src="https://js.arcgis.com/4.17/"></script>
  <script src="main.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <input type="checkbox" id="active">
  <label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
  <div class="wrapper">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Encyclopedia</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Community</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
  </div>
  <div id="sceneContainer"></div>
  <!--This line creates a content division in the web page, called a div element, that will hold the globe. The element has an ID attribute that is set to sceneContainer. This attribute allows the element to be referred to by this name in both the CSS and the JS files.-->
</body>

</html>



Read more here: https://stackoverflow.com/questions/67929673/navigation-menu-works-but-the-rest-of-the-website-is-just-white

Content Attribution

This content was originally published by Gapullis at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: