Reputation: 11

Why does my hamburger menu not work when I click it?

I can't find problem, why hamburger menu doesn't work when I click it. It should show mobile menu on the right site of mobile screen. When I click hamburger nothing happens. What can I try to resolve this?

    const mobileNav = document.querySelector(".lista")
    const burger = document.querySelector(".fa-solid")
    
    
    const funkcja = () => {
        mobileNav.classList.toggle("active")
    }
    
    burger.addEventListener("click", funkcja)

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    html{
        font-size: 10px;
        font-family: Arial, Helvetica, sans-serif;
     
    }
    
    
    
    .logo {
        width: 23vh;
    }
    
    /* Nav styling */ 
    
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: rgba(186, 184, 182, 0.694);
        height: 20vh;
        position: relative;
    
    }
    
    ul {
        display: flex;
      justify-content: space-around;
      text-align: center;
      width: 80%;
      text-decoration: none;
      list-style: none;
 
    }
    
    a {
        font-size: 2rem;
        
        text-decoration: none;
    
    }
    
    
    
    .fa-solid  {
        display: none;
    }
    
    .galeria {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 300px;
        justify-content: space-around;
        align-items: center;
        gap: 5px;
    
    }
    img {
        width: 200px;
        height: 200px;
    }
    
    @media only screen and (max-width: 1000px){
    ul {
        position: absolute;
        top: 20vh;
        right: 0;
        display: flex;
        flex-direction: column;
        height: 200px;
        background-color: blueviolet;
        width: 150px;
        transition: 1s;
        transform: translate(100%);
        border-radius: 5px;
    }
    
    .fa-solid {
        display: block;
        color: blueviolet;
        font-size: 70px;
    }
    
    }
    
    @media only screen and (max-width: 400px) {
        ul {
            width: 100%;
            
        }
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://kit.fontawesome.com/8849951a46.js" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hamburgerek</title>
    
    </head>
    <body>
        <nav class="dupa">
    <img class="logo" src="https://cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt="">
    
    
    
    <ul class="lista">
        <li><a href="#">Strona Główna</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Cennik</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
    
    <i class="fa-solid fa-bars"></i>
    <script src="/Users/mateuszszyca/html/nowy/js.js"></script>
        </nav>
        
    </body>
    </html>

Upvotes: 0

Answers (2)

UmairFarooq

Reputation: 1315

I have commented the changes for you. you are giving active class to the ul but not defining it in the css.the reason you couldn't see you nav list because you were using overflow hidden in global selector *{overflow:hidden}.i hope this solves your issue.

const mobileNav = document.querySelector(".lista")
const burger = document.querySelector(".fa-solid")

burger.addEventListener("click", () => {
  mobileNav.classList.toggle("active")
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* overflow:hidden */
  /* Removed */
}

html {
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.logo {
  width: 23vh;
  height: 100%;
  /* Added */
}


/* Nav styling */

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: rgba(186, 184, 182, 0.694);
  height: 20vh;
  position: relative;
}

ul {
  display: flex;
  justify-content: space-around;
  text-align: center;
  width: 80%;
  text-decoration: none;
  list-style: none;
}

a {
  font-size: 2rem;
  text-decoration: none;
}

.fa-solid {
  display: none;
}

.galeria {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-around;
  align-items: center;
  gap: 5px;
}

@media only screen and (max-width: 1000px) {
  ul {
    position: absolute;
    top: 23vh;
    /* added */
    right: 10px;
    /* added */
    display: flex;
    visibility: hidden;
    /* added */
    flex-direction: column;
    height: 200px;
    background-color: blueviolet;
    width: 0px;
    /* for animation */
    border-radius: 5px;
    transition: width 0.25s ease-in-out;
    overflow: hidden;
  }
  ul.active {
    visibility: visible;
    /* added */
    width: 150px;
  }
  .fa-solid {
    display: block;
    color: blueviolet;
    font-size: 4rem;
    /* changed from px to rem for better responsiveness */
  }
}

@media only screen and (max-width: 400px) {
  ul {
    width: 100%;
  }
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://kit.fontawesome.com/8849951a46.js" crossorigin="anonymous"></script>
</head>

<body>

  <body>
    <nav class="dupa">
      <img class="logo" src="https://cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt="">



      <ul class="lista">
        <li><a href="#">Strona Główna</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Cennik</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>

      <i class="fa-solid fa-bars"></i>
      <script src="/Users/mateuszszyca/html/nowy/js.js"></script>
    </nav>
  </body>

Upvotes: 2

Nisha

Reputation: 428

const mobileNav = document.querySelector(".lista")
    const burger = document.querySelector(".fa-solid")
    
    
    const funkcja = () => {
        mobileNav.classList.toggle("active")
    }
    
    burger.addEventListener("click", funkcja)

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    html{
        font-size: 10px;
        font-family: Arial, Helvetica, sans-serif;
     
    }
    
    
    
    .logo {
        width: 23vh;
    }
    
    /* Nav styling */ 
    
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: rgba(186, 184, 182, 0.694);
        height: 20vh;
        position: relative;
    
    }
    
    ul {
        display: flex;
      justify-content: space-around;
      text-align: center;
      width: 80%;
      text-decoration: none;
      list-style: none;
      
    
    }
    
    a {
        font-size: 2rem;
        
        text-decoration: none;
    
    }
    
    
    
    .fa-solid  {
        display: none;
    }
    
    .galeria {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 300px;
        justify-content: space-around;
        align-items: center;
        gap: 5px;
    
    }
    img {
        width: 200px;
        height: 200px;
    }
    
    @media only screen and (max-width: 1000px){
    ul {
        position: absolute;
        top: 20vh;
        right: 0;
        display: flex;
        flex-direction: column;
        height: 200px;
        background-color: blueviolet;
        width: 150px;
        transition: 1s;
        border-radius: 5px;
    }
    
    
    
    
    .fa-solid {
        display: block;
        color: blueviolet;
        font-size: 70px;
    }
    
    
    
    
    }
    
    
    @media only screen and (max-width: 400px) {
        ul {
            width: 100%;
            
        }
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://kit.fontawesome.com/8849951a46.js" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hamburgerek</title>
    
    </head>
    <body>
        <nav class="dupa">
    <img class="logo" src="https://cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt="">
    
    
    
    <ul class="lista">
        <li><a href="#">Strona Główna</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Cennik</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
    
    <i class="fa-solid fa-bars"></i>
    <script src="/Users/mateuszszyca/html/nowy/js.js"></script>
        </nav>
        
    </body>
    </html>

Upvotes: -1

Why does my hamburger menu not work when I click it?

Answers (2)

Related Questions