issue with hiding and showing navbar items

[rowlandsfc]

i have created a basic website that is responsive including the nave bar that takes the links shows and hides then using a button on smaller screen, my issue is that it doesnt work unless i click on the website title then it will start working but as soon as i go to another page it stops working until i click the title again

navbar

  <!-- Navigation -->
  <nav class="nav">
    <div class="wrapper container">
      <div class="logo"><a href="">Bubble And Balm</a></div>
      <ul class="nav-list">
        <div class="top">
          <label for="" class="btn close-btn"><i class="fas fa-times"></i></label>
        </div>
        <li><a href="index.php">Home</a></li>
        <li><a href="products.php">Products</a></li>
        <li><a href="account.php">Account</a></li>
        <li><a href="contactus.php">Contact Us</a></li>

        <?php
        if(isset($_SESSION['user_id']))
        {
        ?>
            <li><a href="logout.php">Logout</a></li>
        <?php
        }
        else
        {
        ?>
            <li><a href="login.php">Login/Register</a></li>
        <?php
        }
        
        ?>

        <!-- icons -->
        <li class="icons">
          <span>
            <img src="./images/shoppingBag.svg" alt="" />
          </span>
        </li>
      </ul>
      <label for="" class="btn open-btn"><i class="fas fa-bars"></i></label>
    </div>
  </nav>

navbar css and @media

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color:#ffd5ef;
  height: 6.5rem;
  line-height: 6.5rem;
}

.nav.fix-nav {
  width: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 999;
}

nav .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.wrapper .logo a {
  color: black;
  font-size: 2.7rem;
  font-weight: 600;
  padding: 0.5rem;
  margin-bottom: 10px;
}

.wrapper .nav-list {
  display: inline-flex;
}

.nav-list li i {
  color: var(--grey2);
}

.nav-list a {
  color: var(--black);
  font-size: 1.5rem;
  padding: 0.9rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 300ms ease;
}

.nav-list li a:hover {
  color: var(--primary);
}

.nav-list .drop-menu1,
.nav-list .drop-menu2 {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  width: 20rem;
  top: 8.5rem;
  line-height: 4.5rem;
  position: absolute;
  background-color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
}

.nav-list .drop-menu1 li a,
.nav-list .drop-menu2 li a {
  display: block;
  font-size: 1.5rem;
  width: 100%;
  padding: 0 0 0 1.5rem;
  border-radius: 0;
  color: var(--grey2);
}

.nav-list .drop-menu1 li a:hover,
.nav-list .drop-menu2 li a:hover {
  color: var(--primary);
}

.nav-list li:hover .drop-menu1,
.nav-list li:hover .drop-menu2,
.nav-list li:hover .mega-box {
  opacity: 1;
  visibility: visible;
  top: 6.5rem;
}

.mega-box {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 8.5rem;
  left: 0;
  width: 100%;
  padding: 0 3rem;
  background-color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
}

.mega-box .content {
  padding: 2.5rem 2rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.mega-box .content .row {
  width: calc(25% - 3rem);
  line-height: 4.5rem;
}

.content .row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content .row header {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--grey1);
}

.content .row .mega-links {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  margin-left: -4rem;
}

.content .row li {
  padding: 0 2rem;
}

.content .row li a {
  padding: 0 2rem;
  display: block;
  font-size: 1.5rem;
  color: var(--grey2);
}

.content .row li a:hover {
  color: var(--primary);
}

.nav-list .mobile-item {
  display: none;
}

.nav-list input {
  display: none;
}

.wrapper .btn {
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  display: none;
}

.nav-list .icons span {
  display: inline-block;
  margin: 0.5rem 1rem 0 0;
  position: relative;
}

.nav-list .icons .count {
  justify-content: center;
  position: absolute;
  top: 0rem;
  right: -0.8rem;
  background-color: var(--primary);
  height: 2rem;
  padding: 0.5rem;
  color: var(--white);
  font-weight: 700;
  border-radius: 50%;
}

@media only screen and (max-width: 968px) {
  .wrapper .nav-list {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    max-width: 35rem;
    background-color: var(--white);
    display: block;
    overflow-y: auto;
    line-height: 5rem;
    box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.1);
    transition: all 300ms linear;
  }

  .wrapper .nav-list.show {
    left: 0;
  }

  .nav-list li {
    margin: 1.5rem 1rem;
  }

  .nav-list a {
    display: block;
    font-size: 1.8rem;
    padding: 0 2rem;
    color: var(--black);
  }

  .nav-list .drop-menu1,
  .nav-list .drop-menu2 {
    position: static;
    opacity: 1;
    visibility: visible;
    top: 6.5rem;
    padding-left: 2rem;
    width: 100%;
    max-height: 0;
    overflow: hidden;
  }

  #showdrop1:checked ~ .drop-menu1,
  #showdrop2:checked ~ .drop-menu2,
  #showMega:checked ~ .mega-box {
    max-height: 100%;
  }

  .nav-list .drop-menu1 li,
  .nav-list .drop-menu2 li {
    margin: 0;
  }

  .nav-list .drop-menu1 li a,
  .nav-list .drop-menu2 li a {
    color: var(--grey2);
    font-size: 1.5rem;
  }

  .nav-list .desktop-item {
    display: none;
  }

  .nav-list .mobile-item {
    display: block;
    font-size: 1.8rem;
    padding-left: 2rem;
    color: var(--black);
    cursor: pointer;
    border-radius: 0.5rem;
  }

  .nav-list .mobile-item:hover {
    color: var(--primary);
  }

  .mega-box {
    position: static;
    top: 6.5rem;
    padding: 0 2rem;
    opacity: 1;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    transition: all 300ms ease;
  }

  .mega-box .content {
    flex-direction: column;
    padding: 2rem 2rem 0 2rem;
  }

  .mega-box .content .row {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    margin-bottom: 1.5rem;
  }

  .content .row:nth-child(1),
  .content .row:nth-child(2) {
    border-top: 0;
  }

  .content .row .mega-links {
    border-left: 0;
    padding-left: 2rem;
  }

  .row .mega-links li {
    margin: 0;
  }

  .wrapper .btn {
    display: block;
    color: var(--black);
  }

  .nav-list .top {
    position: relative;
    display: block;
    background-color: var(--primary);
    width: 100%;
    height: 8rem;
  }

  .nav-list .close-btn {
    position: absolute;
    top: 1.5rem;
    right: 2.5rem;
    color: rgb(100, 99, 99);
  }

  .nav-list .icons {
    padding-left: 2rem;
  }
}

custom scripts

const openNav = document.querySelector(".open-btn");
const closeNav = document.querySelector(".close-btn");
const menu = document.querySelector(".nav-list");

const menuLeft = menu.getBoundingClientRect().left;
openNav.addEventListener("click", () => {
  if (menuLeft < 0) {
    menu.classList.add("show");
  }
});

closeNav.addEventListener("click", () => {
  if (menuLeft < 0) {
    menu.classList.remove("show");
  }
});

// Fixed Nav
const navBar = document.querySelector(".nav");
const navHeight = navBar.getBoundingClientRect().height;
window.addEventListener("scroll", () => {
  const scrollHeight = window.pageYOffset;
  if (scrollHeight > navHeight) {
    navBar.classList.add("fix-nav");
  } else {
    navBar.classList.remove("fix-nav");
  }
});

// Scroll To
const links = [...document.querySelectorAll(".scroll-link")];
links.map(link => {
  if (!link) return;
  link.addEventListener("click", e => {
    e.preventDefault();

    const id = e.target.getAttribute("href").slice(1);

    const element = document.getElementById(id);
    const fixNav = navBar.classList.contains("fix-nav");
    let position = element.offsetTop - navHeight;

    window.scrollTo({
      top: position,
      left: 0,
    });
    navBar.classList.remove("show");
    menu.classList.remove("show");
    document.body.classList.remove("show");
  });
});

 

[NotSunfighter]

I have never seen so much code to do a simple drop down menu. It looks like your using bootstrap, ssas, and jquery. Lets start there: learn to code. Learn HTML, CSS, and JavaScript! Then, if your doing a lot of programming and haven't made a personal library you can learn jquery. When studying HTML pay close attention to CSS-Grid and FlexBox. Oh don't forget responsive design.

Sorry I can't help. Don't know where you originally hide the menu list. That is what I believe is your problem, you don't hide it on page start up.