:checked selector CSS

Question

I've been following a tutorial to create mobile navigation without Javascript and the idea behind this is to use a checkbox and the :checked CSS selector. I managed to get it working when I tested it out on a blank page but then when I tried to integrate it into my actual site it stopped working. I'll show the code for both so you can see where perhaps I've gone wrong (note that DIV IDs and classes have changed between the two documents but I've made sure the HTML has also changed accordingly so that's not the problem).

   .show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: black;
    background: #ac3333;
    text-align: center;
    padding: 10px 10px;
border: 1px black solid;

}

#menu {
display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


#hamburger {
display: inline-block;
}

.icon-bar {
display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin-bottom: 4px;
    background-color: black;

}

That's the working code. Here's the non-working code. In the non-working code, clicking the button does not do anything and I can't work out why!

body {
  margin: 0;
  line-height: 1.428;
}
.wrap {
  width: 90%;
  max-width: 71.5em;
  margin: 0 auto;
  padding: 0.625em 0.625em;
}
#header {
  background: #442869;
  padding-top: 1em;
  padding-bottom: 1em;
  min-height: 6em;
}
#mobile-navigation-btn {
  display: none;
}
#mobile-nav {
  display: none;
}
#regular-nav {
  display: block;
}
.show-menu {
  text-decoration: none;
  color: black;
  background: #ac3333;
  text-align: center;
  padding: 10px 10px;
  border: 1px black solid;
}
/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #mobile-nav {
  display: block;
}
#hamburger {
  display: inline-block;
}
.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 4px;
  background-color: black;
}
@media only screen and (max-width: 768px) {
  #mobile-navigation-btn {
    display: block;
  }
  #regular-nav {
    display: none;
  }
}

<div id="header">
  <div class="wrap">
    <picture>
      <source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
        <img srcset="seiri-logo-small.png" alt="…">
    </picture>
    <div id="mobile-navigation-btn">
      <label for="show-menu" class="show-menu">Menu
        <div id="hamburger">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </div>
      </label>
      <input type="checkbox" id="show-menu" role="button">
    </div>
    <div id="regular-nav">
      <ul>
        <li><a href="#" class="current">Home</a>
        </li>
        <li><a href="#">Customer Research</a>
        </li>
        <li><a href="#">Business Improvement</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
      </ul>
    </div>



  </div>
</div>

<div id="mobile-nav">
  <ul>
    <li><a href="#" class="current">Home</a>
    </li>
    <li><a href="#">Customer Research</a>
    </li>
    <li><a href="#">Business Improvement</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
    <li><a href="#">Blog</a>
    </li>
  </ul>
</div>

It would be better if you post your code to [jsfiddle](https://jsfiddle.net/) with your html. — xuanyue, Aug 03 '15 at 01:30
I failed to find any button in that code. which button do u mean thats not working? — choz, Aug 03 '15 at 01:50

score 0 · Accepted Answer · edited May 23 '17 at 12:06

Its not working because of your css selector, the input and the menu need to be siblings the way you currently have the css set. Read this post to understand further the ~ operator

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

body {
  margin: 0;
  line-height: 1.428;
}
.wrap {
  width: 90%;
  max-width: 71.5em;
  margin: 0 auto;
  padding: 0.625em 0.625em;
}

#header {
  background: #442869;
  padding-top: 1em;
  padding-bottom: 1em;
  min-height: 6em;
}

#mobile-navigation-btn {
  <!--display: none;
  -->
}
#mobile-nav {
  display: none;
}

.show-menu {
  text-decoration: none;
  color: black;
  background: #ac3333;
  text-align: center;
  padding: 10px 10px;
  border: 1px black solid;
}
/*Hide checkbox*/

input[type=checkbox] {
  <!--display: none;
  -->
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #mobile-nav {
  display: block;
}
#hamburger {
  display: inline-block;
}
.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 4px;
  background-color: black;
}
@media only screen and (max-width: 768px) {
  #mobile-navigation-btn {
    display: block;
  }
  #regular-nav {
    display: none;
  }
}

<!doctype html>

<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement("picture");
  </script>
  <script src="picturefill.min.js" async></script>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="header">
    <div class="wrap">

      <picture>
        <source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
          <img srcset="seiri-logo-small.png" alt="…">
      </picture>

      <div id="mobile-navigation-btn">
        <label for="show-menu" class="show-menu">Menu
          <div id="hamburger">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </div>
        </label>
      </div>
      


    </div>
  </div>
<input type="checkbox" id="show-menu" role="button" />
  <div id="mobile-nav">
    <ul>
      <li><a href="#" class="current">Home</a>
      </li>
      <li><a href="#">Customer Research</a>
      </li>
      <li><a href="#">Business Improvement</a>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
      <li><a href="#">Blog</a>
      </li>
    </ul>
  </div>
</body>

</html>

Thank you for the answer - looks like I need to do some more reading into things as I didn't realise CSS selectors were so complex. Haha! — James Koash, Aug 03 '15 at 02:00

:checked selector CSS

1 Answers1