CODEWITHSUNDEEP
javascripthtmlcss
AndrewNeedsHelp
AndrewNeedsHelp

Reputation: 415

How Do I Fix the Nav Bar So That the Menu is Removed when the person is not viewing the nav bar? | CSS / Javascript

Question

This is quite hard to explain, but:

I have a burger menu, that I use when the screen is smaller than a certain amount of pixels.

The burger menu slides onto the screen as an overlay.

However, when the hamburger menu is not being viewed, it still affects the page. It means that when I use margin: auto things do not center properly, because there is still an off screen menu.

Additionally, on mobile for some reason, I can actually scroll across to see the hamburger menu even if it has not been clicked.

Here is the code that is used for the nav bar:

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  // Toggle Nav
  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
    //Animate Links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`
      }
    })
    //Burger Animation
    burger.classList.toggle('toggle');
  })
}
navSlide();
  nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
  flex-wrap: nowrap;
}

.nav-links li {
  list-style: none;
}

.burger div {
  width: 25px;
  height: 3px;
  margin: 5px;
  transition: all 0.3s ease;
}

.burger {
  display: none;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 50%;
  }
}

@media screen and (max-width: 997px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    flex-direction: column;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .burger {
    display: block;
  }
<nav>
  <div class="logo">
    <h4>XXX</h4>
  </div>
  <ul class="nav-links">
    <li class=".page1-btn btn" id="active"><a id="additionally-active" href="index.html">Home</a></li>
    <li class=".page2-btn btn"><a href="page1.html">page1</a></li>
    <li class=".page3-btn btn"><a href="page2.html">page2.html</a></li>
    <li class=".page4-btn btn"><a href="page3.html">page3.html</a></li>
    <li class=".page5-btn btn"><a href="page4.html">page4.html</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>

</nav>

If you know how to remove the content of the menu completely from the page when the hamburger menu is not being used that would be greatly appreciated.

I think that hopefully it can be fixed with the toggle in javascript, but can't think of how to do it?

Upvotes: 0

Views: 69

Answers (1)

Tanu Arora
Tanu Arora

Reputation: 261

It is hard to understand your problem.I think you want to give the user a control to toggle the navigation menu.

If you want your navigation menu as a part of the screen:

  1. For mobile devices, keep the navigation menu as hidden.
  2. For web devices, give a button above your navigation menu which would toggle the visibility for your navigation menu.

If you want to have it as an overlay, that's even better.For that you have to provide your navigation menu a position absolute.If button or the logo is clicked, execute function gets invoked.

function execute() {
  var x = document.querySelector(".class_name");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Upvotes: 1

Related Questions