<nav class="navbar navbar-light bg-faded"> <input type="checkbox" id="navbar-toggle-cbox"> <label for="navbar-toggle-cbox" class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header"> ☰ </label> <div class="collapse navbar-toggleable-xs" id="navbar-header"> <a class="navbar-brand" href="#">Brandname</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav>
#navbar-toggle-cbox:checked ~ .collapse { display:block; } #navbar-toggle-cbox { display: none; }