Toggle button not working (input/HTML/CSS)

HTML-CSS
1

I’m somehow not able to access my toggle_button correctly.

I have hidden the ul and li elements with a breakpoint using display:none and want to show them again using a checkbox. Unfortunately it doesn’t work and I don’t know why. I’ve already tried 3 million selectors for “toggle_button:checked XYZ”. Somehow I’m not able to access the correct selector?!

<header>
        
            <section class="header_empty">

            </section>

            <section class="header_logo">
                <a href=""><img class ="schriftzug" src="XXX" alt="XXX" width="100%"></a>
            </section>

            <section class="header_nav">

                <div class="nav_container">
                    <nav class="burger_menu">
                        <input type="checkbox" id="toggle_button">
                        <label for="toggle_button">
                            <img class="toggle_button_icon" src="img/menu.svg" alt="" width="40px">
                        </label>
                    </nav>
                    

                    <nav class="nav_social">
                        <ul>
                            <li><a href="#"><img src="img/codepen_grau.svg" alt="Icon Codepen" onmouseover="src='img/codepen_pink.svg'" onmouseout="src='img/codepen_grau.svg'"  width="30px"></a></li>
                            <li><a href="#"><img src="img/github_grau.svg" alt="Icon GitHub" onmouseover="src='img/github_pink.svg'" onmouseout="src='img/github_grau.svg'" width="30px"></a></li>
                            <li><a href="#"><img src="img/instagram_grau.svg" alt="Icon Instagram" onmouseover="src='img/instagram_pink.svg'" onmouseout="src='img/instagram_grau.svg'" width="30px"></a></li>
                            <li><a href="#"><img src="img/linkedin_grau.svg" alt="Icon Linkedin" onmouseover="src='img/linkedin_pink.svg'" onmouseout="src='img/linkedin_grau.svg'" width="30px"></a></li>
                            <li><a href="#"><img src="img/xing_grau.svg" alt="Icon Xing" onmouseover="src='img/xing_pink.svg'" onmouseout="src='img/xing_grau.svg'" width="30px"></a></li>

                        </ul>
                    </nav>

                    <nav class="nav_main">
                        <ul>
                            <li><a href="about.html">About</a></li>
                            <li><a href="print.html">Print</a></li>
                            <li><a href="web.html">Web</a></li>
                            <li><a href="kontakt.html">Kontakt</a></li>    
                        </ul>
                    </nav>
                </div>
            </section>
    </header>

header {
    background-color: #fdb9ce;
    width: 85%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    margin: 0 auto;
    align-items: end;
  }



  

  /*--------- Navigation Einstellungen ---------*/  
  .nav_container {
    display: flex;
    flex-direction: column;
    align-items: end;
  }

  .nav_social ul {
    display: flex;
  }

  .nav_main ul {
    display: flex;
  }

  li {
    list-style-type: none;
    margin: 5px 0;
  }

  li a {
    text-decoration: none;
    padding: 5px;
    color: var(--text-color-middle);
  }

/*--------- Bürger Menü ---------*/ 

@media(max-width: 900px){
  ul li {
    display: none;
  }

  #toggle_button:checked ul li {
    display: flex;
  }

}
2

Welcome to the FCC forum. Currently you have #toggle_button id, only within your input element.

And your CSS selector is not matching the requirements you want. You can’t add other elements as a child selector with a self closing elements.

3

In your html, parent element is nav for ul and li.
@Melanie86

4

Hello, do you have a link to where you are running this?

6

but what do I have to do? unfortunately I do not understand it. are there too many boxes? does the input have to be a child element of ul and li?

I’ve tried everything. I have a version where it works, but I don’t have a box for the elements from the input. But I’ll need that later to align the icon.

7

hmm?

https://www.planetenmaler.de/test/

8

You can use the :has() selector, but it is still a new selector, so older browser versions do not support it.

@media (max-width: 900px) {
  ul li {
    display: none;
  }

  body:has(:checked) ul li {
    display: flex;
  }
}

The selectors are a little wishy-washy and should be more targeted to not affect all list item elements.

1 Like
9

It worked. :slight_smile: Thanks!!!

But I used

.nav:has(:checked) ul li {
    display: flex;
  }

Maybe saver?

But I don’t understand why my first version doesn’t work.

If the “burger_menu” class is removed, my version works. Why?

<div class="burger_menu">
                        <input type="checkbox" id="toggle_button">
                        <label for="toggle_button">
                            <img class="toggle_button_icon" src="img/menu.svg" alt="" width="40px">
                        </label>
                    </div>

Is it because it can’t “bounce back” as a child element? Because the input element is not on the same “level” as the ul-elements? So because the input-element is already nested?

10

Yes, up until we got the :has() selector we had no “parent” selector as it is often referred to.

You could only select siblings or children in relation to the starting selector (you can’t go back up from the original starting point).

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.