Issue
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.
Solution
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.
Answered By - MalwareMoon Answer Checked By - Pedro (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.