My HTML code looks like this:

```
<nav>
        <ul class="nav-links">
            <li class="hvr-shutter-out-horizontal"><a href="#">Login</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">About Us</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Donate</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Feedback</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle">

```

and the css file is

```
.nav-links {
    text-align: center;
    font-size: 15px;
    width: 100%;
    display: none;  
}

#toggle:checked + .nav-links{
    display: block;
}

```

But the checked property here is not working. Please help .