Jump to content

issue with hiding and showing navbar items


rowlandsfc

Recommended Posts

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");
  });
});

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.