htmlcssmedia-queriesnavbarhamburger-menu

My hamburger menu isn't showing up after the media query

After the media query, I can't seem to manage to get the hamburger menu to show up. Navbar links do disappear, but the menu won't show up.

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --main-color: #ff702a;
  --text-color: #fff;
  --bg-color: #1e1c2a;
  --big-font: 5rem;
  --h2-font: 2.25rem;
  --p-font: 0.9rem;
  --bg-hover: #2f2b41;
}

body {
  background-color: var(--bg-color);
  font-family: "Poppins", sans-serif;
  height: 2000px;
}

body .navbar {
  background-color: grey;
  display: flex;
  justify-content: space-between;
  height: 80px;
  position: fixed;
  width: 100%;
}

body .navbar .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
}

body .navbar .logo a {
  color: var(--main-color);
  text-decoration: none;
  font-weight: 900;
  font-size: 2rem;
  cursor: pointer;
}

body .navbar .hamburger-menu {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

body .navbar .hamburger-menu .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

body .navbar .navbar-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-right: 25px;
  min-width: auto;
}

body .navbar .navbar-menu li {
  list-style: none;
  opacity: 0.8;
  transition: 0.4s ease;
  border-radius: 50px;
}

body .navbar .navbar-menu li a {
  text-decoration: none;
  color: white;
  font-size: 1.2rem;
  padding: 0.8rem;
}

body .navbar .navbar-menu li:hover {
  opacity: 1;
  background-color: var(--bg-hover);
}

@media (max-width: 760px) {
  .hamburger-menu {
    display: flex;
  }
  .navbar-menu li {
    display: none;
  }
}
<!DOCTYPE html>
<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">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- HEADER -->

  <header class="navbar">
    <div class="logo">
      <a href="#">MyWeb</a>
    </div>

    <a href="#" class="hamburger-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>

    <ul class="navbar-menu">
      <li><a href="home">Home</a></li>
      <li><a href="about">About</a></li>
      <li><a href="menu">Menu</a></li>
      <li><a href="services">Services</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
  </header>

  <!-- SOMETHING -->



  <script src="script.js"></script>
</body>

</html>

Solution

  • Your media query styles that make your hamburger visible are lower specificity and thus never applied.

    /* Two class selectors */
body .navbar .hamburger-menu {
  display: none;
}

@media (max-width: 760px) {
  /* One class selector */
  .hamburger-menu {
    display: flex;
  }
}

    I compiled your scss into css for the snippet in both your question and this answer, you do NOT need to nest everything like there's no tomorrow - because you run into problems like this and it's just bad practice.

    Go and remove all your unnecessary nesting!

    *,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --main-color: #ff702a;
  --text-color: #fff;
  --bg-color: #1e1c2a;
  --big-font: 5rem;
  --h2-font: 2.25rem;
  --p-font: 0.9rem;
  --bg-hover: #2f2b41;
}

body {
  background-color: var(--bg-color);
  font-family: "Poppins", sans-serif;
  height: 2000px;
}

body .navbar {
  background-color: grey;
  display: flex;
  justify-content: space-between;
  height: 80px;
  position: fixed;
  width: 100%;
}

body .navbar .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
}

body .navbar .logo a {
  color: var(--main-color);
  text-decoration: none;
  font-weight: 900;
  font-size: 2rem;
  cursor: pointer;
}

body .navbar .hamburger-menu {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

body .navbar .hamburger-menu .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

body .navbar .navbar-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-right: 25px;
  min-width: auto;
}

body .navbar .navbar-menu li {
  list-style: none;
  opacity: 0.8;
  transition: 0.4s ease;
  border-radius: 50px;
}

body .navbar .navbar-menu li a {
  text-decoration: none;
  color: white;
  font-size: 1.2rem;
  padding: 0.8rem;
}

body .navbar .navbar-menu li:hover {
  opacity: 1;
  background-color: var(--bg-hover);
}

@media (max-width: 760px) {
  body .navbar .hamburger-menu {
    display: flex;
  }
  .navbar-menu li {
    display: none;
  }
}
    <!DOCTYPE html>
<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">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- HEADER -->

  <header class="navbar">
    <div class="logo">
      <a href="#">MyWeb</a>
    </div>

    <a href="#" class="hamburger-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>

    <ul class="navbar-menu">
      <li><a href="home">Home</a></li>
      <li><a href="about">About</a></li>
      <li><a href="menu">Menu</a></li>
      <li><a href="services">Services</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
  </header>

  <!-- SOMETHING -->



  <script src="script.js"></script>
</body>

</html>