Need help with this bugged dropdown
I made this navbar with dropdown menus, it works fine when the navbar is on desktop. While hitting responsive mode,
When i click the dropdown, it does work, but when I click the second dropdown, it will suddenly open the link isnide the dropdown. I dont understand why its happening. Also I am using hover class to active the dropdonw
3 Replies
/* NAVBAR START */
.navbar {
height: 12vh;
width: 100vw;
background-color: var(--primary);
padding: 0;
padding-left: clamp(1.5em, calc(1.5em + ((1vw - 0.87625em) * 7.722)), 4em);
padding-right: clamp(1.5em, calc(1.5em + ((1vw - 0.87625em) * 7.722)), 4em);
position: fixed;
justify-content: space-between;
top: 0;
gap: 5em;
border-bottom: 3px solid var(--accent);
z-index: 999;
}
.logo {
font-weight: 600;
color: var(--accent);
letter-spacing: 2px;
font-size: clamp(1.375em, calc(1.375em + ((1vw - 0.2em) * 1)), 2.375em);
width: fit-content;
}
.navbar__items {
justify-content: space-between;
letter-spacing: 2px;
font-weight: 500;
gap: 1.4em;
flex: 1;
color: var(--secondary);
/* overflow-y: scroll; */
}
.navbar__items.active {
right: 0;
}
.navbar__link {
color: var(--secondary);
position: relative;
gap: 7px;
text-wrap: nowrap;
font-size: var(--fs--18-14);
/* cursor: none !important; */
cursor: default;
}
.dd__navLink {
display: flex;
position: relative;
}
.online_bkg {
font-size: var(--fs--18-14);
}
.dd__navLink img {
transition: var(--general-transition);
}
.dd__navLink img.active {
transform: rotate(180deg);
}
/* NAVBAR START */
.navbar {
height: 12vh;
width: 100vw;
background-color: var(--primary);
padding: 0;
padding-left: clamp(1.5em, calc(1.5em + ((1vw - 0.87625em) * 7.722)), 4em);
padding-right: clamp(1.5em, calc(1.5em + ((1vw - 0.87625em) * 7.722)), 4em);
position: fixed;
justify-content: space-between;
top: 0;
gap: 5em;
border-bottom: 3px solid var(--accent);
z-index: 999;
}
.logo {
font-weight: 600;
color: var(--accent);
letter-spacing: 2px;
font-size: clamp(1.375em, calc(1.375em + ((1vw - 0.2em) * 1)), 2.375em);
width: fit-content;
}
.navbar__items {
justify-content: space-between;
letter-spacing: 2px;
font-weight: 500;
gap: 1.4em;
flex: 1;
color: var(--secondary);
/* overflow-y: scroll; */
}
.navbar__items.active {
right: 0;
}
.navbar__link {
color: var(--secondary);
position: relative;
gap: 7px;
text-wrap: nowrap;
font-size: var(--fs--18-14);
/* cursor: none !important; */
cursor: default;
}
.dd__navLink {
display: flex;
position: relative;
}
.online_bkg {
font-size: var(--fs--18-14);
}
.dd__navLink img {
transition: var(--general-transition);
}
.dd__navLink img.active {
transform: rotate(180deg);
}
.dd__links {
position: absolute;
width: max-content;
background: var(--primary);
padding-top: 0;
color: var(--secondary);
align-items: stretch;
left: -55px;
height: 0;
margin-top: 0;
padding-top: 10px;
display: none;
transition: opacity var(--general-transition), visibility var(--general-transition);
}
.dd__links{
display: flex;
flex-direction: column;
position: absolute;
top: 20px;
display: none;
}
.dd__navLink:hover .dd__links {
display: flex;
height: auto;
/* padding-top: 2em; */
}
.dd__link {
color: var(--secondary);
font-size: var(--fs--18-14);
padding: 1em 2em;
width: 100%;
display: block;
transition: var(--general-transition);
}
.dd__link:hover {
background: var(--primary--dark);
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
border-radius: 1px;
margin: 5px auto;
transition: var(--general-transition);
background-color: var(--secondary);
}
.bar:nth-child(2) {
width: 30px;
margin-right: 5px;
}
/* Hamburger Menu Animation */
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* NAVBAR END */
.dd__links {
position: absolute;
width: max-content;
background: var(--primary);
padding-top: 0;
color: var(--secondary);
align-items: stretch;
left: -55px;
height: 0;
margin-top: 0;
padding-top: 10px;
display: none;
transition: opacity var(--general-transition), visibility var(--general-transition);
}
.dd__links{
display: flex;
flex-direction: column;
position: absolute;
top: 20px;
display: none;
}
.dd__navLink:hover .dd__links {
display: flex;
height: auto;
/* padding-top: 2em; */
}
.dd__link {
color: var(--secondary);
font-size: var(--fs--18-14);
padding: 1em 2em;
width: 100%;
display: block;
transition: var(--general-transition);
}
.dd__link:hover {
background: var(--primary--dark);
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
border-radius: 1px;
margin: 5px auto;
transition: var(--general-transition);
background-color: var(--secondary);
}
.bar:nth-child(2) {
width: 30px;
margin-right: 5px;
}
/* Hamburger Menu Animation */
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* NAVBAR END */
@media (max-width: 1100px) {
/* NAVBAR START */
.hamburger {
display: block;
}
.navbar {
padding: 0 3em;
}
.navbar__items {
flex-direction: column;
justify-content: start;
position: fixed;
top: calc(12vh);
width: 50%;
height: 100vh;
right: -1000px;
background-color: var(--primary);
text-align: center;
padding: 20px 0;
margin: 0;
gap: 2em;
transition: all ease 0.5s;
}
.navbar__item {
margin: 10px 0;
}
.navbar__items ul{
position: static;
background: var(--primary--light);
padding-top: 0;
margin-top: 14px;
}
.dd__navLink,.dd__links{
position: static;
}
.dd__navLink:hover .dd__links{
border: 1px solid red;
}
/* NAVBAR END */
@media (max-width: 1100px) {
/* NAVBAR START */
.hamburger {
display: block;
}
.navbar {
padding: 0 3em;
}
.navbar__items {
flex-direction: column;
justify-content: start;
position: fixed;
top: calc(12vh);
width: 50%;
height: 100vh;
right: -1000px;
background-color: var(--primary);
text-align: center;
padding: 20px 0;
margin: 0;
gap: 2em;
transition: all ease 0.5s;
}
.navbar__item {
margin: 10px 0;
}
.navbar__items ul{
position: static;
background: var(--primary--light);
padding-top: 0;
margin-top: 14px;
}
.dd__navLink,.dd__links{
position: static;
}
.dd__navLink:hover .dd__links{
border: 1px solid red;
}
/* NAVBAR END */
const hamburger = document.querySelector(".hamburger");
const navMenu = document.getElementById("navbar__items");
const ddNavLinks = document.querySelectorAll(".dd__navLink");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})
const hamburger = document.querySelector(".hamburger");
const navMenu = document.getElementById("navbar__items");
const ddNavLinks = document.querySelectorAll(".dd__navLink");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})
Rather than posting the code here it would probably be better if you setup a Codepen or similar with your code. That would make it simpler of others to help you.