CODEWITHSUNDEEP
javascripthtmlcss
Emma Culhane
Emma Culhane

Reputation: 27

How to I get my burger menu JavaScript to work?

I'm following an online tutorial for a webpage, which is going grand except the responsive burger menu won't work - specifically the JS 'click' and 'show' function.

My navbar now also has a scroll function which appears when I shrink the page.

In fact, the JS isn't working for the entire site. Any advice on how to fix this would be greatly appreciated.

document.querySelector('.menu-button').addEventListener('click', () =>
  document.querySelector('.main-menu').classList.toggle('show'));
.main-nav .logo {
  width: 170px;
}

.nav-wrap {
  background-color: #000;
}

.main-nav {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 20px 0;
  font-size: 18px;
  justify-content: space-between;
}

.main-nav ul {
  display: flex;
}

.main-nav ul li {
  padding: 0 10px;
}

.main-nav a {
  color: #fff;
}

.main-nav ul.main-menu {
  flex: 1;
  margin-left: 20px;
}

.main-nav ul li a {
  padding-bottom: 2px;
}

.main-nav ul li a:hover {
  border-bottom: 2px solid #fff;
}

@media(max-width: 700px) {
  .menu-button {
    display: block;
  }
  .menu-button:hover {
    opacity: 0.5;
  }
  .main-nav ul.right-menu {
    margin-right: 50px;
  }
  .main-nav ul.main-menu {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #7c7c7c;
    width: 50%;
    height: 100%;
    border-right: rgb(56, 56, 56) 1px solid;
    opacity: 0.9;
    padding: 30px;
    transform: translateX(-500px);
    transition: transform 0.5s ease-in-out;
  }
  .main-nav ul.main-menu li {
    padding: 10px;
    border-bottom: #ccc solid 1px;
    font-size: 14px;
  }
  .main-nav ul.main-menu li:last-child {
    border-bottom: 0;
  }
  .main-nav ul.main-menu.show {
    transform: translateX(-20px);
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<div class="menu-button">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="nav-wrap">
  <div class="container">
    <nav class="main-nav">
      <img src="images/logo.png" alt="Snowden Logo" class="logo">
      <ul class="main-menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="media.html">Media</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>

      <ul class="right-menu">
        <li>
          <a href="#">
            <i class="fab fa-instagram"></i>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fab fa-facebook"></i>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Upvotes: 0

Views: 294

Answers (1)

noxter
noxter

Reputation: 202

Hei, I troubleshoot your code and I saw a very important thing that you did here. The media query. What you can see in your code is that it works under the condition that the page width is less than 700px. And this does not work always, for obvious reasons

I tried removing the media query option and leave all the code inside it to stand alone, that will work regardless of the page width.

So, your code from this

@media(max-width: 700px) {
  .menu-button {
    display: block;
  }
  .menu-button:hover {
    opacity: 0.5;
  }
  .main-nav ul.right-menu {
    margin-right: 50px;
  }
  .main-nav ul.main-menu {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #7c7c7c;
    width: 50%;
    height: 100%;
    border-right: rgb(56, 56, 56) 1px solid;
    opacity: 0.9;
    padding: 30px;
    transform: translateX(-500px);
    transition: transform 0.5s ease-in-out;
  }
  .main-nav ul.main-menu li {
    padding: 10px;
    border-bottom: #ccc solid 1px;
    font-size: 14px;
  }
  .main-nav ul.main-menu li:last-child {
    border-bottom: 0;
  }
  .main-nav ul.main-menu.show {
    transform: translateX(-20px);
  }
}

will become this

.menu-button {
    display: block;
  }
  .menu-button:hover {
    opacity: 0.5;
  }
  .main-nav ul.right-menu {
    margin-right: 50px;
  }
  .main-nav ul.main-menu {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #7c7c7c;
    width: 50%;
    height: 100%;
    border-right: rgb(56, 56, 56) 1px solid;
    opacity: 0.9;
    padding: 30px;
    transform: translateX(-500px);
    transition: transform 0.5s ease-in-out;
  }
  .main-nav ul.main-menu li {
    padding: 10px;
    border-bottom: #ccc solid 1px;
    font-size: 14px;
  }
  .main-nav ul.main-menu li:last-child {
    border-bottom: 0;
  }
  .main-nav ul.main-menu.show {
    transform: translateX(-20px);
  }

Try to look at this demo I made Demo

To simply tell you what you did wrong, the media query will allow your code to "work" only when the page is less than 700px wide. Without the media query, it will work always

EDIT

after the above solution, the author of the question had an issue that the burger menu was always visible and not working as intended. This is because the CSS is making the menu width 100% wide, thus making it around 1000px wide instead of 0 (hidden)

The solution to this is removing 2 lines of property in the CSS.

go here .main-nav ul.main-menu and remove those 2 lines of code width: 50%; height: 100%;. It is possible also to edit the width and change it from 50% to 20%. It will work too as intended

Upvotes: 1

Related Questions