Burger Menu don't display in CSS and HTML

Question

I try to make a burger menu in HTML and CSS but I have an issue with it. The menu burger don't display.

When I click on the burger, it don't display despite I put all properties needed.

This is the code in HTML

#img_snark {
    width: 273px;
    height: 37px;
    position: relative;
    margin-right: 5%;
    left: 3%;
    top: 30%;
}

label, #toggle {
    display: none;
}

nav {
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 104px;
    margin-left: 100px;
    margin-right: 100px;
    box-shadow: 0 0 50px #0000001A;
    background-color: white;
    z-index: 1;
}

nav li {
    list-style-type: none;
    height: 30px;
    font-family: "Dosis", "sans-serif";
    color: #00525D;
    display: flex;
    align-items: center;
}

#tabs {
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: flex-end;
    position: relative;
    right: 4%;
    bottom: 19%;
}


@media all and (max-width:1060px) {
    label {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        top: 18%;
        font-size: 50px;
        margin: 0 auto;
        cursor: pointer;
    }

    nav #tabs, nav #img_snark {
        display: none;
        flex-direction: column;
        height: 200px;
    }

<header>
            <nav id="nav">
                <label for="toggle">☰</label>
                <input type="checkbox" id="toggle">
                <img src="Logo-horizontal.png" alt="logo_snark" id="img_snark"/>
                <ul id="tabs">
                    <li>Qui Sommes-nous</li>
                    <li>Blog</li>
                    <li>FAQ</li>
                    <li>Contact</li>
                    <li id="compte">Mon compte</li>
                </ul>
            </nav>
            <img src="Group 173.png" alt="uk" id="uk_images">
        </header>

:

What's the problem ? I try to look for solutions but nothing for me.

Any help is welcome,

Best Regards,

If the "menu" is the `
` element, that's set as `display: none;` in the `@media` styles. By what logic do you expect that to change when clicking on the ``? — David, Jul 26 '23 at 19:04
Surprisingly there is no canonical hamburger menu question in generic HTML/CSS here yet, but the closest is this one, which uses Bootstrap: https://stackoverflow.com/questions/26317679/how-to-add-hamburger-menu-in-bootstrap — TylerH, Jul 26 '23 at 20:53

score 0 · Accepted Answer · answered Jul 26 '23 at 19:14

Since you have a checkbox being checked/unchecked when you click the menu, we can just add this CSS rule to make the menu show/hide

#toggle:checked ~ #tabs {
  display: block;
}

That says "when #toggle is :checked and is next to #tabs, show it

#img_snark {
    width: 273px;
    height: 37px;
    position: relative;
    margin-right: 5%;
    left: 3%;
    top: 30%;
}

label, #toggle {
    display: none;
}

nav {
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 104px;
    margin-left: 100px;
    margin-right: 100px;
    box-shadow: 0 0 50px #0000001A;
    background-color: white;
    z-index: 1;
}

nav li {
    list-style-type: none;
    height: 30px;
    font-family: "Dosis", "sans-serif";
    color: #00525D;
    display: flex;
    align-items: center;
}

#tabs {
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: flex-end;
    position: relative;
    right: 4%;
    bottom: 19%;
}


@media all and (max-width:1060px) {
    label {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        top: 18%;
        font-size: 50px;
        margin: 0 auto;
        cursor: pointer;
    }

    nav #tabs, nav #img_snark {
        display: none;
        flex-direction: column;
        height: 200px;
    }
    
    #toggle:checked ~ #tabs {
      display: block;
    }
}

<header>
    <nav id="nav">
        <label for="toggle">☰</label>
        <input type="checkbox" id="toggle">
        <img src="Logo-horizontal.png" alt="logo_snark" id="img_snark"/>
        <ul id="tabs">
            <li>Qui Sommes-nous</li>
            <li>Blog</li>
            <li>FAQ</li>
            <li>Contact</li>
            <li id="compte">Mon compte</li>
        </ul>
    </nav>
    <img src="Group 173.png" alt="uk" id="uk_images">
</header>

you should also add condition for hiding , " #toggle:not(:checked) ~ #tabs { display: none; }" — Rajiv Sharma, Jul 26 '23 at 19:20
It's crazy ! It's the same thing and It work in the snippet but don't work for me. — BAH alpha, Jul 26 '23 at 21:56

Burger Menu don't display in CSS and HTML

1 Answers1