Slide in/out navigation bar {no javascript}....PLEASE HELP

HTML & CSS
1

yea good day folks. please i am trying to do a slide in/out navigation without javascript using the concept of drop down menu when clicked.
this is my code but its not working.
I am tutoring myself

HTML CODE

<body>
<header><span>OGA CHINEX</span>

<input type="checkbox" id="toggle" />
<label for="toggle" class="toggleIcon">&#9776;</label>
</header>
<nav class="sidenav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">SOcial</a></li>
<li><a href="#">Feeds</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<div class="container">
<p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p><p>1.AAbrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiqo orqibrebiuer biuer   erf erf efierfrf ierf be i w f wfewweuewui weuwewuwqleqr929h 2oqhoiq</p>
</div>

CSS CODE

*{
    margin:0;
    padding:0;
}

header{
    width:100%;
    height:100px;
    text-align:center;
    background:#0C9
}
header span{
    line-height:100px;
}

.sidenav{
    height:100%;
    background:#000;
    opacity:0.7;
    text-align:center;
    width:240px;
    position:fixed;
    top:0;
    left:-240px;
}
nav ul{
    list-style:none;
}
nav a{
    text-decoration:none;
    color: #0cf;
    padding:15px 0;
    display:block;
    border-bottom:1px solid #666;
    font-weight:bold
}
nav li:last-child a{
    border-bottom:none;
}
nav a:hover{
    
    color:#FF0
}
nav li:hover{
    background:#666;
}

.container{
    width:1100px;
    margin:0 auto;
}
.toggleIcon{
    float:right;
    color:#000;
    font-size:24px;
    cursor:pointer;
    position:relative;
    padding:5px;
    right:5px
}

#toggle{
    display:;
}

#toggle:checked ~ .sidenav{
    left:0;
    position:fixed
}
2

The problem is your sibling selector ~.
This won’t work because the .sidenav element is not a sibling of the #toggle input element.
The sibling selectors only work on elements that are siblings, that is they share a common direct parent element.
The parent of .sidenav is the body element, the parent of the #toggle is the header element.
Moving the #toggle out of the header will fix it, the label may stay inside the header.

1 Like
3

For this to be true:

 #toggle:checked ~ .sidenav {
 left:0;
 position:fixed
}

The structure would need to be this:

<header><span>OGA CHINEX</span>
  <input type="checkbox" id="toggle" />
  <label for="toggle" class="toggleIcon">&#9776;</label>
  <nav class="sidenav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">SOcial</a></li>
      <li><a href="#">Feeds</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Edit: Beaten By Sam :slight_smile:

2 Likes
4

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