How can I have the nav menu, going out of the navbar, and not overlay it?-CodePudding

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 >
      <img src="./img/logo.png"  alt=" logo." />
      <ul >
        <li ><a href="#" >link1</a></li>
        <li ><a href="#" >link2</a></li>
        <li ><a href="#" >link3</a></li>
        <li ><a href="#" >link4</a></li>
        <li ><a href="#" >link5</a></li>
        <li ><a href="#" >link6</a></li>
        <li ><a href="#" >link7</a></li>
      </ul>
      <div >
        <span ></span>
        <span ></span>
        <span ></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 >
    <img src="./img/logo.png"  alt="logo." />
    <ul >
      <li ><a href="#" >link1</a></li>
      <li ><a href="#" >link2</a></li>
      <li ><a href="#" >link3</a></li>
      <li ><a href="#" >link4</a></li>
      <li ><a href="#" >link5</a></li>
      <li ><a href="#" >link6</a></li>
      <li ><a href="#" >link7</a></li>
    </ul>
    <div >
      <span ></span>
      <span ></span>
      <span ></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.

CodePudding user response：

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.

CodePudding user response：

Change the z-index value from 1 to -1

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