Small problem with hamburger, but I don't see it. Help me to find error please-CodePudding

    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 >
    <img  src="https://cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt="">
    
    
    
    <ul >
        <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 ></i>
    <script src="/Users/mateuszszyca/html/nowy/js.js"></script>
        </nav>
        
    </body>
    </html>

Guys I can't find problem, why hamburger menu doesn't work when I click him. It should show mobile menu on the right site of mobile screen. When I click hamburger nothing happens. Anyone see any solution?

CodePudding user response：

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 >
            <img  src="https://cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt="">



            <ul >
                <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 ></i>
            <script src="/Users/mateuszszyca/html/nowy/js.js"></script>
        </nav>
    </body>

CodePudding user response：

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 >
    <img  src="https://cdn.pixabay.com/photo/2015/11/16/16/41/web-1045994_1280.jpg" alt="">
    
    
    
    <ul >
        <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 ></i>
    <script src="/Users/mateuszszyca/html/nowy/js.js"></script>
        </nav>
        
    </body>
    </html>