2

i'm converting my website to concrete5. This website is supposed to be responsive. So i'm trying to make a responsive menu for smaller screens.

However, when i click on my menu button, the menu doesn't show up (it doesn't switch to display:block).

Code:

CSS:

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

HTML (pulled from concrete5):

 <div id="navwrapper">
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <div id="menu">
    <div id="test" class=" ccm-block-styles">
      <ul class="nav">
        <li class="nav-selected nav-path-selected"><a href="/" target="_self" class="nav-selected nav-path-selected">Home</a></li>
        <li class=""><a href="/index.php/biography/" target="_self" class="">biography</a></li>
        <li class=""><a href="/index.php/sculptures/" target="_self" class="">sculptures</a></li>
        <li class=""><a href="/index.php/drawings/" target="_self" class="">drawings</a></li>
        <li class=""><a href="/index.php/paintings/" target="_self" class="">paintings</a></li>
        <li class=""><a href="/index.php/installation/" target="_self" class="">installation</a></li>
        <li class=""><a href="/index.php/studio/" target="_self" class="">studio</a></li>
        <li class=""><a href="/index.php/info/" target="_self" class="">info</a></li>
        <li class=""><a href="/index.php/contact/" target="_self" class="">contact</a></li>
      </ul>
    </div>
    <div id="links" class=" ccm-block-styles">
      <p><a href="https://www.facebook.com/erlend.vanlandeghem?fref=ts" target="_blank"><img src="/files/cache/3ae097c24f710271444b8d9e77aab5d4_f38.png" alt="facebook.png" width="20" height="20"></a>&nbsp;&nbsp;<img src="/files/cache/5d2604980ec06d13bb257fec2ed03283_f36.png" alt="Linkedin.png" width="20" height="20">&nbsp;&nbsp;<a href="mailto:erlend.van.landegem@telenet.be"><img src="/files/cache/0e6dbc07cf49fee9d65a14a779ce2eff_f37.png" alt="mail.png" width="20" height="20"></a></p>
    </div>
Jacob
  • 192
  • 1
  • 19

1 Answers1

3

Check how general sibling selector work. This will work if you use Adjacent sibling selector(+):

 /*Show menu when invisible checkbox is checked*/ 
input[type=checkbox]:checked ~ #menu{ display: none; }
<div id="navwrapper">
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <div id="menu">
    <div id="test" class=" ccm-block-styles">
      <ul class="nav">
        <li class="nav-selected nav-path-selected"><a href="/" target="_self" class="nav-selected nav-path-selected">Home</a>
        </li>
        <li class=""><a href="/index.php/biography/" target="_self" class="">biography</a>
        </li>
        <li class=""><a href="/index.php/sculptures/" target="_self" class="">sculptures</a>
        </li>
        <li class=""><a href="/index.php/drawings/" target="_self" class="">drawings</a>
        </li>
        <li class=""><a href="/index.php/paintings/" target="_self" class="">paintings</a>
        </li>
        <li class=""><a href="/index.php/installation/" target="_self" class="">installation</a>
        </li>
        <li class=""><a href="/index.php/studio/" target="_self" class="">studio</a>
        </li>
        <li class=""><a href="/index.php/info/" target="_self" class="">info</a>
        </li>
        <li class=""><a href="/index.php/contact/" target="_self" class="">contact</a>
        </li>
      </ul>
    </div>
    <div id="links" class=" ccm-block-styles">
      <p>
        <a href="https://www.facebook.com/erlend.vanlandeghem?fref=ts" target="_blank">
          <img src="/files/cache/3ae097c24f710271444b8d9e77aab5d4_f38.png" alt="facebook.png" width="20" height="20">
        </a>&nbsp;&nbsp;
        <img src="/files/cache/5d2604980ec06d13bb257fec2ed03283_f36.png" alt="Linkedin.png" width="20" height="20">&nbsp;&nbsp;
        <a href="mailto:erlend.van.landegem@telenet.be">
          <img src="/files/cache/0e6dbc07cf49fee9d65a14a779ce2eff_f37.png" alt="mail.png" width="20" height="20">
        </a>
      </p>
    </div>
Community
  • 1
  • 1
Alex Char
  • 32,879
  • 9
  • 49
  • 70
  • Still doesn't work when i try to do this in my code. When testing in chrome i can see the menu when i change the display settings of the 'ul' tag to block. Check this screenshot: http://imgur.com/QvYw6yi – Jacob Nov 26 '14 at 13:08
  • You have to read how sibling selectors works. You can't use it in `ul` element cause sibling selector `+` select next element and next element of checkbox is `div` with id #menu not `ul`.. – Alex Char Nov 26 '14 at 13:12
  • Okay. Still can't find the correct piece of code to show and hide the menu on my site though. The thing is, the menu worked in ordinary html & css, but since it ported to Concrete5 it stopped working. Can't find the right way to select the whole menu and show/hide it. – Jacob Nov 26 '14 at 13:31
  • Can you post the link of your site? – Alex Char Nov 26 '14 at 13:32
  • At this moment running on a localhost. But coming online today so i'll keep you posted. – Jacob Nov 26 '14 at 14:05
  • Change to this: `/*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ #menu{ display: none; }` As i said read how sibling selectors works.. – Alex Char Nov 26 '14 at 16:31
  • Am i missing something here? this doesn't seem to work – Jacob Nov 26 '14 at 16:46
  • What do you mean it doesn't work? I tested it straight away in your code and works. You realize that checkbox is hidden? – Alex Char Nov 26 '14 at 18:23
  • Okay, that seems to work. Thanks for your help! There are still some problems like the menu not being on the front of everything (z-index). Any fix? – Jacob Nov 27 '14 at 12:54
  • No problem. Please accept the answer as correct. Also can't see the issue you describe. Explain with more details :) – Alex Char Nov 27 '14 at 13:05
  • I just fixed it! :P haha – Jacob Nov 27 '14 at 13:06