Menu not showing when clicking icon

Question

For my website I want my icon to display a menu bar for mobile users. I have written some javascript code for it, but I can't get it to work properly. I tried creating an element called "Menu" and assigned the icon button class to it. Afterwards I just made a simple classlist toggle for the div I want to show up. When I do this, the class hamburgermenu (the class i want to show when clicking on the button) shows up as a class within the button. To the contrary I want the class to show up on his own without being in the button class. Does anyone know what the problem might be and pointing me in the right direction?

My code is beneath:

const menu = document.querySelector(".hamburger button"); // Get dropdown menu when clicking on hamburger Icon

menu.addEventListener("click", function() {
    Showdropdown();
});
 
// Showing dropdown content

function Showdropdown() {
  menu.classList.toggle("hamburgermenu");
}

/* General styling attributes */ 
html {
    -webkit-text-size-adjust: 100%;
}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    text-decoration:none;
    list-style:none;
    box-sizing: border-box;
}

:root {
    --color-primary: #4EC843;
    --color-secondary: #387CFF;
    --color-dashboard: purple;
    --color-hover: #20d62c;
    --color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);
    --color-showcase: #FAFAFA;
    --color-withwithout: #6D6D6D;

    --container-width-lg: 85%;
    --container-width-md: 90%;
    --container-width-sm: 94%;
    --dashboard-width: clamp(210px, 22vw, 325px);

    --transition: all 200ms ease;
    --transition-hamburger: all 180ms ease;
    --tranition-button: all 800ms ease;
}

body * {
    font-family: "Open Sans", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: var(--container-width-sm);
    margin: 0 auto;
}

a {
    color:black;

}

h1, h2, h3, h4 h5{
    line-height:inherit;
}

h1 {
    font-size:3rem;
}

h2 {
    font-size: 1.9rem;
}

h3 {
    font-size:1.363rem;
}

h4 {
    font-size:1.125rem;
}

h5 {
    font-size:0.938rem;
}

.m1 {
    margin-left:0.5rem;
}

.h-6 {
    height:1.5rem;
}

.w-6 {
    width:1.5rem;
}

svg {
    display:flex;
    vertical-align: middle;
}

hr {
    display: flex;
    opacity: 15%;
    width: 3.125rem;
    text-align: center;
}

img {
    width:100%;
    height:auto;
}

section {
    display:block;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

.transition {
    transition: all 300ms ease;
}


/* Navigation Menu */
    
nav {
    width:100%;
    height:4.5rem;
    position:fixed;
    top:0;
    z-index:11; 
    background: white;
}

.nav_container {
    height:4.5rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.nav_menu {
    display:flex;
    align-items: center;
    gap:3.5rem;
    font-size: 0.95rem;
    font-weight:500;
}

.nav_menu button {
    background:none;
    font-size:0.95rem;
    font-weight: 500;
}

.nav_menu button:hover {
    color:grey;
    transition: var(--transition);
}

.nav_menu a:hover {
    transition: var(--transition);
    color: grey;
}

.login_nav {
    display: flex;
    align-items: center;
    gap:1rem;
    font-weight:500;
    font-size: 0.95rem;
}

.login_nav a {
    color:black;
}

.login_nav a:hover {
    transition: var(--transition);
    color:grey;
}

.Login:hover {
    transition: var(--transition);
    color:grey;
}
    
.switchIconRotate {
    transform-origin: center;
    transition: 0.2s;
}

.fa-angle-down {
    color:#6161F2
}

.iconUp .fa-solid {
    transform-origin: center;
    transform: rotate(180deg);
}
  
.demobutton {
    cursor:pointer;
    background-color: var(--color-primary);
    border-radius:2.125rem;
    border:none;
    color: white;
    width:8.125rem;
    height:2.188rem;
    font-weight:500;
    font-size:0.918rem;
}

.demobutton:hover {
    background-color: #20D62C;
    transition:var(--tranition-button);
}

.startingbackground {
    content:'';
    position:relative;
    margin-top:4.5rem;
    width:100%;
    height:100vh;
    background: var(--color-variant);
    border-radius: 0% 0% 75% 0%;
    overflow: hidden;
}

.startingbackground3 {
    display: flex;
    position: relative;
    margin-top: 2rem;
}

.dropbtn {
    cursor: pointer;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown-content {
    position: absolute;
    background-color: white;
    border-radius: 0.4rem;
    padding: 2rem;
    gap:1.5rem;
    opacity: 100%;
    display: none;
}

.dropdown-content2 {
    display:none;
    top:4.5rem;
    right:20rem;
    width:25rem;
    position:absolute;
    padding:0.5rem;
    gap:1.5rem;
    opacity: 100%;
    border-radius:0.4rem;
    background-color:white;
    margin: 0 auto 0 auto;
    transition: 300ms;
}

.show {
    display:flex;
    flex-direction: column;
}

.hamburger {
    display:none;
}

.hamburger a {
    font-family: inherit;
}

.hamburger a:hover {
    transition: var(--transition);
    color: grey;
}

.hamburger_button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
    border-radius: 0.375rem;
    width:2rem;
    height:2rem;
}

.hamburger_button:hover {
    transition: var(--transition-hamburger);
    background-color:rgb(217, 217, 217);
}

.hamburgermenu {
    display: none;
    width:10rem;
    height:10rem;
    background-color:rgb(255 255 255);
    margin-top: 15rem;
    border-radius:5rem;
}

@media screen and (max-width: 890px) {
  .hamburger {
        display:block;
    }
    .nav_menu {
        display:none;
    }
    .login_nav {
        display:none;
    }
    .hamburger {
        display:block;
    }
    .nav_container {
        padding-left: 0.3rem;
        margin-left: auto;
    }
}

Marko Lukić · Answer

`.hamburgermenu {
    display:block;
    width:10rem;
    height:10rem;
    background-color:rgb(255 255 255);
    margin-top: 15rem;
    border-radius:5rem;
}
.hamburgermenu {
    display: none;
}

Remove the additional class hamburgermenu that has a display: none; property. Never make duplicates in CSS.

Menu not showing when clicking icon

1 Answers