Search code examples
javascripthtmlcssnavigationhamburger-menu

Issue with navigation bar when page loads

You can find a link to my site for reference here: http://pensacola.co.uk/

On a desktop device, when you click on the burger menu the navigation bar transitions in from the right-hand side of the page. This functionality works fine, however on a mobile device, when the page loads it includes the navigation items on the right-hand side and therefore doesn't work properly. Is there any way to fix this so that only my page contents sows until you have clicked on the burger menu?

enter image description here

HTML

<nav>
    <div class="logo">
      <a href="/">Pensacola</a>
    </div>
    <ul class="nav-links">
      <li><a href="people.html">People</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="film.html">Film</a></li>
      <li><a href="music.html">Music</a></li>
      <li><a href="podcast.html">Podcast</a></li>
      <li><a href="books.html">Books</a></li>
      <li><a href="art.html">Art</a></li>
      <li><p>Pensacola is an independent journalism blog based in the United Kingdom. Focusing on people, culture, art & media.</p></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>

CSS

/* Navigtaion - Responsive Format */

@media screen and (max-width:2000px) {

  body {
    overflow-x: hidden;
  }

  .nav-links {
    background-color: #F4F4F4;
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0px;
    top: 50px;
    display: flex;
    flex-direction: column;
    align-items: left;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    padding-top: 50px;
  }

  nav {
    background-color: #F4F4F4;
  }

  .burger {
    display: block;
    cursor: pointer;
  }

}

@media screen and (max-width: 900px) {

  .nav-links li {
    font-size: 20pt;
  }

  .nav-links li p {
    width: 90%;
  }

}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px,5px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px,-5px);
}

JS

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');

  burger.addEventListener('click',()=> {
    // Toggle nav
    nav.classList.toggle('nav-active');

    // Animate links
    navLinks.forEach((link, index) => {
      if(link.style.animation) {
         link.style.animation = '';
      } else {
      link.style.animation = `navLinkFade 0.5 ease forwards ${index / 7 + 3}s`;
    }
  });

  //Burger animation
  burger.classList.toggle('toggle');

});

}
Solution

  • You need to add z-index property to the .nav-links like this.

    @media screen and (max-width: 900px) {
.nav-links { z-index: 100; }
}

    Hope it helps.