Fri. Sep 22nd, 2023

[ANSWERED] javascript – How can I have the nav menu, going out of the navbar, and not overlay it?

By

Nov 18, 2022 css, html, javascript, menu, responsive

Solution 1 :

I don’t think it can be done until the styles of nav and ul become siblings. Also you are trying to set z-index on statically positioned element, which does not take effect.

Solution 2 :

Change the z-index value from 1 to -1

@media (max-width: 768px) {
  ...
  
  .nav__menu {
    ...
    z-index: -1;
  }
  
  ...
}

Problem :

I’ve spent already 4h on trying to solve this one, but I just give up.
I’m trying to make an responsive menu, but when I press on hamburger menu, I would like my menu to drop down under the navbar, not on top of it, as you can see on the snippet.

<body>
    <nav class="nav">
      <img src="./img/logo.png" class="nav__logo" alt=" logo." />
      <ul class="nav__menu">
        <li class="nav__item"><a href="#" class="nav__link">link1</a></li>
        <li class="nav__item"><a href="#" class="nav__link">link2</a></li>
        <li class="nav__item"><a href="#" class="nav__link">link3</a></li>
        <li class="nav__item"><a href="#" class="nav__link">link4</a></li>
        <li class="nav__item"><a href="#" class="nav__link">link5</a></li>
        <li class="nav__item"><a href="#" class="nav__link">link6</a></li>
        <li class="nav__item"><a href="#" class="nav__link">link7</a></li>
      </ul>
      <div class="hamburger__menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
    

    <script src="script.js"></script>
  </body>

.nav {
  width: 100%;
  display: flex;
  max-height: 10vh;
  border: 1px solid red;
  background-color: #fff;
  justify-content: space-between;
  align-content: center;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  z-index: 5;
}

.nav__logo {
  width: 100px;
  height: 100px;
  align-self: center;
  margin-left: 1rem;
}

.nav__menu {
  display: flex;
  list-style: none;
  align-self: center;
  gap: 2rem;
  margin-right: 1rem;
  align-items: center;
}

li {
  list-style: none;
}

ul {
  padding-left: 0;
}

a {
  color: black;
  text-decoration: none;
}

.hamburger__menu {
  display: none;
  cursor: pointer;
  align-self: center;
  margin-right: 1em;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

@media (max-width: 768px) {
  .hamburger__menu {
    display: block;
  }

  .hamburger__menu.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger__menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger__menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }


  .nav__menu {
    position: fixed;
    left: 0%;
    top: -100%; 
    gap: 0;
    flex-direction: column;
    width: 100%;
    text-align: center;
    transition: 1s ease-in-out;
    background-color: #fff;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;  
    border: 1px solid green;
    z-index: 1;
  }


  .nav__item {
    margin: 16px 0;
  }

  .nav__menu.active {
    top: 7.5%;
    transition: top 1s;
  }
}

const hamburger = document.querySelector(".hamburger__menu");
const navMenu = document.querySelector(".nav__menu");

hamburger.addEventListener("click", function () {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
});

document.querySelectorAll(".nav__link").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  })
);

"use strict";

const hamburger = document.querySelector(".hamburger__menu");
const navMenu = document.querySelector(".nav__menu");

hamburger.addEventListener("click", function() {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
});

document.querySelectorAll(".nav__link").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  })
);

.nav {
  width: 100%;
  display: flex;
  max-height: 10vh;
  border: 1px solid red;
  background-color: #fff;
  justify-content: space-between;
  align-content: center;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  z-index: 5;
}

.nav__logo {
  width: 100px;
  height: 100px;
  align-self: center;
  margin-left: 1rem;
}

.nav__menu {
  display: flex;
  list-style: none;
  align-self: center;
  gap: 2rem;
  margin-right: 1rem;
  align-items: center;
}

li {
  list-style: none;
}

ul {
  padding-left: 0;
}

a {
  color: black;
  text-decoration: none;
}

.hamburger__menu {
  display: none;
  cursor: pointer;
  align-self: center;
  margin-right: 1em;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

@media (max-width: 768px) {
  .hamburger__menu {
    display: block;
  }
  .hamburger__menu.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger__menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger__menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .nav__menu {
    position: fixed;
    left: 0%;
    top: -100%;
    gap: 0;
    flex-direction: column;
    width: 100%;
    text-align: center;
    transition: 1s ease-in-out;
    background-color: #fff;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    border: 1px solid green;
    z-index: 1;
  }
  .nav__item {
    margin: 16px 0;
  }
  .nav__menu.active {
    top: 7.5%;
    transition: top 1s;
  }
}

<body>
  <nav class="nav">
    <img src="./img/logo.png" class="nav__logo" alt="logo." />
    <ul class="nav__menu">
      <li class="nav__item"><a href="#" class="nav__link">link1</a></li>
      <li class="nav__item"><a href="#" class="nav__link">link2</a></li>
      <li class="nav__item"><a href="#" class="nav__link">link3</a></li>
      <li class="nav__item"><a href="#" class="nav__link">link4</a></li>
      <li class="nav__item"><a href="#" class="nav__link">link5</a></li>
      <li class="nav__item"><a href="#" class="nav__link">link6</a></li>
      <li class="nav__item"><a href="#" class="nav__link">link7</a></li>
    </ul>
    <div class="hamburger__menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </nav>

</body>

I’ve tried to do it with z-index, but if i’ll add a negative z-index on the menu, then I can’t click the links.

Comments

Comment posted by MalwareMoon

Glad to help. I did also ask another person and was told that they don’t also don’t think it’s possible so this might be the solution. If you feel like this is was the correct answer, you can also tag it as such.

Comment posted by Laur

I’ve tried already, the links won’t work anymore…

Comment posted by Ndaw_Kunda

Okay I see, so you can try to change the sibling between the ul and nav elements or you can also add a second ul element for the mobile menu outside the nav element.

Comment posted by MalwareMoon

Please beware of making duplicate HTML for phone while just hiding the one for desktop. It’s bad for accessibility, SEO and code maintenance.

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022