leMS leMS - 3 months ago 6x
CSS Question

Bootstrap Navigation Toggle

I have a webpage which has a standard bootstrap header (with a logo and dropdown section) and a sidebar for navigation.
I'm trying to make the sidebar collapse when the screen size is small. For this, I've made a toggle button which collapses the menu just fine. But the problem is that it seems that even when the collapse-able menu is closed, some contents still show up on top of everything.
Here's a screenshot to show you what I mean.enter image description here

The purple box shows that even when the menu is closed, its contents somehow show up on top of the other elements.
Is there a fix for this?
Here's the code:

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#side" class="btn btn-default btn-primary pull-left navbar-toggle" data-toggle="collapse"><span class="caret"></span></a>
<a class="navbar-brand pull-right" href="#">Company Logo</a>
<ul id="side" class="nav navbar-nav collapse visible-xs">
<li><a href="#">Home</a></li>
<li><a href="stuff.html">Stuff</a></li>
<li><a href="list.html">List Example</a></li>
<li><a href="#">Contacts</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Logout</a></li>


Try adding this to the navbar-header

<div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

and remove the visible-xs too from there.