-1

When my web page is shown on small devices the menu collapses as expected but when you click on the collapsed menu icon the menu does not appear. There is a slight adjustment of the vertical height of the page below the menu and the last menu item half appears along the top of the page but the rest of the menu is nowhere to be seen.

My Bootstrap code looks like this:

 #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>

Anyone know what I am doing wrong?

Bill Noble
  • 6,466
  • 19
  • 74
  • 133

2 Answers2

1

You problem is here 

#myNavbar .nav {
    position: absolute;
}

When you use position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window. You can refer to THIS question for further info. So what you can do is add @media query and set a size over certain pixels where the position will be absolute. So something like

@media(min-width: 400px) {
        #myNavbar .nav {
            position: absolute;
            bottom: 0;
            right: 0;
            margin-bottom: -10px;
        }
    }
Community
  • 1
  • 1
Izzy
  • 6,740
  • 7
  • 40
  • 84
0

just give proper reference of bootstrap.css and bootstrap.js and your code will work fine.

Apurva Prajapati
  • 52
  • 5