How do I get two nav bars, one after the other, to be static and also snap to the top?
<p>I have 2 nav bars that I want both the be at the top of the page initially but upon scrolling I want the first nav bar with the brand image to collapse away and the second nav bar with the list links to snap to the top of the page where the first nav bar initially was. Does anyone know how I can do this? Here's an image for reference: <a href="https://i.stack.imgur.com/Uv4cy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uv4cy.png" alt="enter image description here"></a></p>

<p>HTML:</p>

<pre><code>&lt;!----- Navbar -----&gt;
&lt;nav class="navbar navbar-default navbar-collapse"&gt;
  &lt;div class="container"&gt;
    &lt;div class="navbar-header"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;img id="brand-image" alt="DEVO Logo" src="/Applications/MAMP/htdocs/D0.1/images/DEVOorig.png"/&gt;
      &lt;/div&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;/div&gt;
  &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-shopping-cart"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;div class="form-group form-inline"&gt;
          &lt;input type="text" class="form-control" placeholder="Search products.."&gt;
        &lt;/div&gt;
        &lt;button type="submit" class="btn btn-secondary" id="product-search-btn"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/button&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top" id="info-head"&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;Tobi's Site&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li&gt;&lt;a href="#section1"&gt;About Us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#section2"&gt;FAQ's&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#section3"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
        &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Work With Us &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#section41"&gt;Drivers&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#section42"&gt;Partners&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#section43"&gt;In House&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#section5"&gt;T's &amp; C's&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#section5"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;
</code></pre>