title: nav bar below nav bar in bootstrap
body: <p><img src="https://i.stack.imgur.com/QLd3B.png" alt="enter image description here"></p>
  
  <p>In the picture you can see , there are two navbar , one with header and othe with menus. They doesn't fit without space. I tried working on it. Please assist.</p>
  
  <pre><code>&lt;nav class="navbar top-color"&gt;
    &lt;!--nav header Div--&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="col-sm-2"&gt;&lt;a class="navbar-head" style="text-decoration:none; color:white;" href="#"&gt;&lt;h1&gt;MY Page&lt;/h1&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;nav class="navbar navbar-inverse "&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt; 
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;WebSiteName&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Page 1 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  &lt;style&gt;
    .top-color {
      background-color: aquamarine;
    }
  &lt;/style&gt;
  </code></pre>