title: CSS - Make navbar stick on fixed-top navbar while scrolling?
body: <p>I have two top navbars in a page. One of them is fixed while another is sticky but when I scroll down the sticky navbar doesn't stick on top of the fixed navbar:</p>
  
  <p><a href="https://i.stack.imgur.com/4mUAZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4mUAZ.png" alt=""></a></p>
  
  <p>and when I scroll down the sticky navbar disappears:</p>
  
  <p>[<img src="https://i.stack.imgur.com/e4Q30.png" alt="[2]"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg"&gt;  
        &lt;a href="http://127.0.0.1:8000/"class="navbar-brand"&gt;My Django App&lt;/a&gt;
        &lt;ul class="navbar-nav ml-auto"&gt;
          &lt;li class="nav-item"&gt;&lt;a href="http://127.0.0.1:8000/"class="nav-link"&gt;Home Page&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="http://127.0.0.1:8000/signup" class="nav-link"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt; 
      
      {% if data %}
      &lt;div class="row"&gt;
        &lt;div class="col col-lg-1"&gt;&lt;/div&gt;
        &lt;div class="col col-lg-8"&gt;
          &lt;nav class="navbar sticky-top navbar-dark bg-dark "&gt;
            &lt;a class="navbar-brand display-4"&gt;List of Users&lt;/a&gt;
          &lt;/nav&gt;
        &lt;/div&gt;  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>The behaviour after removing row and col divs <a href="https://i.stack.imgur.com/42xH5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/42xH5.png" alt="here"></a> after scrolling down<a href="https://i.stack.imgur.com/IOJZj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IOJZj.png" alt="here"></a>
  but by this the django brand is ovarlaped,I want it to align at the center</li>
  <li>edited code of users navbar</li>
  </ul>
  
  <pre><code>&lt;nav class="navbar sticky-top navbar-dark bg-dark"&gt;
                      &lt;a class="navbar-brand display-4"&gt;List of Users&lt;/a&gt;
  
   &lt;/nav&gt; 
  </code></pre>