On small devices, my website's menu collapses as expected. However, when clicking on the collapsed menu icon, the menu fails to appear. Instead, there is a slight adjustment in the vertical height of the page below the menu, and the last menu item partially appears along the top of the page while the rest of the menu remains hidden.
The Bootstrap code I am using is as follows:
#myNavbar {
position: relative;
border:none;
}
#myNavbar .nav {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: -10px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.navbar-default {
background:#FFFFFF;
border-left:none;
border-right:none;
border-top:none;
border-bottom:solid;
border-bottom-width:2px;
border-color:#01B6AC;
width:100% !important;
margin-right:0px;
padding-right:0px;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="/assets/img/outa.png" width="120px;"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li><a href="/browser/saved/">Saved searches</a></li>
<li><a href="../index.html">Settings</a></li>
<li><a href="../index.html">About</a></li>
<li><a href="../index.html">Sign In</a></li>
</ul>
</div>
</div>
</nav>Can anyone point out what I might be doing wrong?