How to toggle a responsive navbar with javascript-CodePudding

I asked this question a couple of weeks ago and I was never able to solve my problem. I was following a video tutorial but when I finished, I wasn't able to get the navabar to open up when you click on the hamburger icon. Clicking the hamburger should add a class called "active" to the navbar which changes the CSS and makes the navbar visible.

Here's the section of the media query that has to do with the navbar

#menu-icon {
    display: initial;
    color: var(--text-color);
}
header .navbar {
    position: absolute;
    top: -400px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #2b2640;
    transition: .3s;
}
    header .navbar .active {
        top: 70px;
    }
    .navbar a {
        padding: 1.5rem;
        display: block;
    }

And here's the javascript

let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");

menu.addEventListener("click", function () {
    navbar.classList.toggle("active");
});

window.onscroll = () => {
    navbar.classList.remove("active");
};

The menu-icon that its targeting is from this line of html

<div  id="menu-icon"></div>

This might be a dumb question, but did I link to the JavaScript properly? Here's the html

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

Thanks for any help

CodePudding user response：

in css you should select div with two class use .firstClass.secondClass try to fix your css.

Here is you css working

#menu-icon {
  display: initial;
  color: var(--text-color);
}
header .navbar {
  position: absolute;
  top: -400px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #2b2640;
  transition: 0.3s;
}
header .navbar.active {
  top: 70px;
}
.navbar a {
  padding: 1.5rem;
  display: block;
}

Here is a small example

let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");

menu.addEventListener("click", function () {
    navbar.classList.toggle("active");
});

window.onscroll = () => {
    navbar.classList.remove("active");
};

#menu-icon {
  display: initial;
  color: var(--text-color);
}
header .navbar {
  position: absolute;
  top: -400px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #2b2640;
  transition: 0.3s;
}
header .navbar.active {
  top: 70px;
}
.navbar a {
  padding: 1.5rem;
  display: block;
}

    <header>
      <button  id="menu-icon">Open Humburger</button>
      <div >
        <h1>Heloo Nav</h1>
      </div>
    </header>

CodePudding user response：

It's unclear from your snippets because not all the code is available or it is missing and therefore not setup correctly (specifically your html).

Just follow a working example for a mobile navigation menu.

https://jsfiddle.net/Lto3z1s2/1/

Html:

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Top Navigation Menu -->
<div >
  <a href="#home" >Logo</a>
  <!-- Navigation links (hidden by default) -->
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);"  onclick="myFunction()">
    <i ></i>
  </a>
</div>

CSS:

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}

JavaScript:

/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}