My nav menu is over website content in mobile view-CodePudding

I have a nav menu on my website and when I change resolution to mobile to see if it's responsive or not, the menu goes over the website content, how can I resolve it? Here is a screenshot of how it is now. Screenshot Here is the HTML Code

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/navbar.css" />
    <title>Navigation bar</title>
  </head>
  <body>
    <header>
      <div id="brand"><a href="main.php">Cactus Soup</a></div>
      <nav>
        <ul>
          <li><a href="/home">Top Filmes</a></li>
          <li><a href="/products">Top Seris</a></li>
          <li><a href="/about">Sobre nos</a></li>
          <li id="login"><a href="/login" >Login</a></li>
          <li id="signup"><a href="/signup">Registar</a></li>
        </ul>
      </nav>
      <div id="hamburger-icon" onclick="toggleMobileMenu(this)">
        <div ></div>
        <div ></div>
        <div ></div>
        <ul >
          <li><a href="/home">Top Filmes</a></li>
          <li><a href="/products">Top Seris</a></li>
          <li><a href="/about">Sobre Nos</a></li>
          <li id="login"><a href="/login" >Login</a></li>
          <li id="signup"><a href="/signup">Registar</a></li>
        </ul>
      </div>
    </header>
    <script src="index.js"></script>
    asjjajjgassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssa
  </body>
</html>

Here is the CSS code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #353836;
  color: white;
  font-family: "Poppins", sans-serif;
}

header a {
  text-decoration: none;
}

header {
  padding: 0 20px;
  background-color: #1d1f1d;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

#brand {
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
}

#brand a {
  color: #09c372;
}

ul {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

ul a {
  color: white;
}

ul li {
  padding: 5px;
  margin-left: 10px;
}

ul li:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

#login,
#signup {
  border-radius: 5px;
  padding: 5px 8px;
}

#login {
  border: 1px solid #498afb;
}

#signup {
  border: 1px solid #ff3860;
}

#signup a {
  color: #ff3860;
}

#login a {
  color: #498afb;
}

#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  height: calc(100vh - 50px);
  width: 100%;
  background-color: black;
}

.mobile-menu li {
  margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
  header nav {
    display: none;
  }

  #hamburger-icon {
    display: block;
  }
}

Here is the JS code

function toggleMobileMenu(menu) {
    menu.classList.toggle('open');
}

I'll be really grateful if someone help me!

CodePudding user response：

You should use @media, and add some padding or margin depending on what you need.

@media only screen and (max-width: 600px) {
  body {
    margin-top: 30px;
  }
}

You can watch here for more information: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CodePudding user response：

I believe that the problem you have right now happens when the Menu is open and when you change the resolution your menu is visible by default. You need to add resize eventListener to close the menu if it's open and the screen size got bigger than 600. Here is an example:

const menu = document.getElementById("hamburger-icon");

window.addEventListener("resize", () => {
    // If window smaller than 600 || menu doesn't have an
    // open state then do nothing
    if (window.innerWidth <= 600 || !menu.classList.contains("open"))
        return;

    // Remvoe open class otherwise
    menu.classList.remove("open");
});