title: Bootstrap 4 sticky-top class on navbar not working
body: <p>Maybe some other classes I have are messing with the sticky-top class of bootstrap. I thought it was as simple as adding the class to the navbar. I do have 2 navbar and not allowed to use fixed-top for some internal reasons.  I was hoping for the second navbar I have is sticky to the top while I am scrolling down. What am I doing wrong? here's my code </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-css lang-css prettyprint-override"><code>/* .text-spLeft {
      margin-left: 5px;
    }
    
    .text-spRight {
      margin-right: 5px;
    }
    
    .header-secondnav .fixed-top {
      margin-top: 70px !important;
    }
    
    .header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {
      border-bottom: 5px;
      border-bottom-color: grey;
      border-bottom-style: solid;
      border-bottom-width: thin;
    }
    .header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {
      margin-bottom: 15px;
    }
    .header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {
      display: none;
    }
    .header-firstnav .form-control:focus, .header-secondnav .form-control:focus {
      outline: 0 !important;
    }
    .header-firstnav .nav-link, .header-secondnav .nav-link {
      color: black;
      font-weight: bold;
    }
    .header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {
      color: #eb1b1e;
      font-weight: bold;
    } */
  
    .text-spLeft {
      margin-left: 5px;
  }
  
  .text-spRight {
      margin-right: 5px;
  }
  
    
    .header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {
      border-bottom: 5px;
      border-bottom-color: grey;
      border-bottom-style: solid;
      border-bottom-width: thin; }
    
    .header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {
      margin-bottom: 15px; }
    
    .header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {
      display: none; }
    
    .header-firstnav .form-control:focus, .header-secondnav .form-control:focus {
      outline: 0 !important; }
    
    .header-firstnav .nav-link, .header-secondnav .nav-link {
      color: black;
      font-weight: bold; }
    
    .header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {
      color: #eb1b1e;
      font-weight: bold; }
    
    .text-spLeft {
      margin-left: 5px; }
    
    .text-spRight {
      margin-right: 5px; }
    
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="./header.css"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
          crossorigin="anonymous"&gt;
      &lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
          crossorigin="anonymous"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="main"&gt;
          &lt;div class="header-firstnav"&gt;
              &lt;nav class="navbar sticky-top navbar-expand-lg"&gt;
                  &lt;a class="navbar-brand" href="#"&gt;
                      &lt;img src="./images/dnowlogo.png" alt="image goes here" class="img-responsive"&gt;
                  &lt;/a&gt;
                  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                      aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
                  &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
  
  
  
                      &lt;ul class="navbar-nav  d-flex justify-content-between w-100 top-nav-ul "&gt;
                          &lt;li class="nav-item "&gt;
                              &lt;form class="form-inline my-2 my-lg-0"&gt;
                                  &lt;div class="input-group"&gt;
                                      &lt;input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input"&gt;
                                      &lt;span class="input-group-append"&gt;
                                          &lt;div class="input-group-text bg-white"&gt;
                                              &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                                          &lt;/div&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item "&gt;
                              &lt;a class="nav-link " href="#"&gt;Shop Online&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item "&gt;
                              &lt;a class="nav-link " href="#"&gt;Investor&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item "&gt;
                              &lt;a class="nav-link " href="#"&gt;Careers&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li class="nav-item dropdown "&gt;
                              &lt;a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                  United States
                                  &lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;
  
                              &lt;/a&gt;
                              &lt;!-- &lt;button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                          United States
                                          &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
                                        &lt;/button&gt; --&gt;
                              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Australia&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Canada&lt;/a&gt;
                                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;India&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
  
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
          &lt;div class="header-secondnav"&gt;
              &lt;nav class="navbar sticky-top navbar-expand-lg"&gt;
                  &lt;!-- &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                      aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt; --&gt;
  
                  &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
                      &lt;!-- &lt;ul class="navbar-nav  justify-content-lg-between w-100 d-lg-flex"&gt; --&gt;
                      &lt;!-- &lt;li class="nav-item active"&gt;
                                    &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="nav-item"&gt;
                                    &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
                                  &lt;/li&gt; --&gt;
                      &lt;ul class="navbar-nav  d-flex justify-content-between w-100"&gt;
                          &lt;li class="nav-item dropdown"&gt;
                              &lt;a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                  Products and Services
                                  &lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;
  
                              &lt;/a&gt;
                              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item dropdown "&gt;
                              &lt;a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                  Solutions
                                  &lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;
  
                              &lt;/a&gt;
                              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item dropdown "&gt;
                              &lt;a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                  Industries
                                  &lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;
  
                              &lt;/a&gt;
                              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item dropdown "&gt;
                              &lt;a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                  About Us
                                  &lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;
  
                              &lt;/a&gt;
                              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item dropdown "&gt;
                              &lt;a class="nav-link " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                  Resources Center
                                  &lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;
  
                              &lt;/a&gt;
                              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item "&gt;
                              &lt;a class="nav-link " href="#"&gt;Location&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item "&gt;
                              &lt;a class="nav-link " href="#"&gt;Contact Us&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div style="height: 2000px;"&gt;
  
       
  
      &lt;/div&gt;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      &lt;!-- Footer --&gt;
      &lt;footer class="page-footer font-small mdb-color lighten-3 pt-4"&gt;
  
          &lt;!-- Footer Links --&gt;
          &lt;div class="container text-center text-md-left"&gt;
  
              &lt;!-- Grid row --&gt;
              &lt;div class="row"&gt;
  
                  &lt;!-- Grid column --&gt;
                  &lt;div class="col-md-4 col-lg-3 mr-auto my-md-4 my-0 mt-4 mb-1"&gt;
  
                      &lt;!-- Content --&gt;
                      &lt;h5 class="font-weight-bold text-uppercase mb-4"&gt;Footer Content&lt;/h5&gt;
                      &lt;p&gt;Here you can use rows and columns here to organize your footer content.&lt;/p&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet numquam iure provident voluptate
                          esse quasi, veritatis totam voluptas nostrum.&lt;/p&gt;
  
                  &lt;/div&gt;
                  &lt;!-- Grid column --&gt;
  
                  &lt;hr class="clearfix w-100 d-md-none"&gt;
  
                  &lt;!-- Grid column --&gt;
                  &lt;div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1"&gt;
  
                      &lt;!-- Links --&gt;
                      &lt;h5 class="font-weight-bold text-uppercase mb-4"&gt;About&lt;/h5&gt;
  
                      &lt;ul class="list-unstyled"&gt;
                          &lt;li&gt;
                              &lt;p&gt;
                                  &lt;a href="#!"&gt;PROJECTS&lt;/a&gt;
                              &lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;p&gt;
                                  &lt;a href="#!"&gt;ABOUT US&lt;/a&gt;
                              &lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;p&gt;
                                  &lt;a href="#!"&gt;BLOG&lt;/a&gt;
                              &lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;p&gt;
                                  &lt;a href="#!"&gt;AWARDS&lt;/a&gt;
                              &lt;/p&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
                  &lt;!-- Grid column --&gt;
  
                  &lt;hr class="clearfix w-100 d-md-none"&gt;
  
                  &lt;!-- Grid column --&gt;
                  &lt;div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1"&gt;
  
                      &lt;!-- Contact details --&gt;
                      &lt;h5 class="font-weight-bold text-uppercase mb-4"&gt;Address&lt;/h5&gt;
  
                      &lt;ul class="list-unstyled"&gt;
                          &lt;li&gt;
                              &lt;p&gt;
                                  &lt;i class="fa fa-home mr-3"&gt;&lt;/i&gt; New York, NY 10012, US&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;p&gt;
                                  &lt;i class="fa fa-envelope mr-3"&gt;&lt;/i&gt; info@example.com&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;p&gt;
                                  &lt;i class="fa fa-phone mr-3"&gt;&lt;/i&gt; + 01 234 567 88&lt;/p&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;p&gt;
                                  &lt;i class="fa fa-print mr-3"&gt;&lt;/i&gt; + 01 234 567 89&lt;/p&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
                  &lt;!-- Grid column --&gt;
  
                  &lt;hr class="clearfix w-100 d-md-none"&gt;
  
                  &lt;!-- Grid column --&gt;
                  &lt;div class="col-md-2 col-lg-2 text-center mx-auto my-4"&gt;
  
                      &lt;!-- Social buttons --&gt;
                      &lt;h5 class="font-weight-bold text-uppercase mb-4"&gt;Follow Us&lt;/h5&gt;
  
                      &lt;!-- Facebook --&gt;
                      &lt;a type="button" class="btn-floating btn-fb"&gt;
                          &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;!-- Twitter --&gt;
                      &lt;a type="button" class="btn-floating btn-tw"&gt;
                          &lt;i class="fa fa-twitter"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;!-- Google +--&gt;
                      &lt;a type="button" class="btn-floating btn-gplus"&gt;
                          &lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;!-- Dribbble --&gt;
                      &lt;a type="button" class="btn-floating btn-dribbble"&gt;
                          &lt;i class="fa fa-dribbble"&gt;&lt;/i&gt;
                      &lt;/a&gt;
  
                  &lt;/div&gt;
                  &lt;!-- Grid column --&gt;
  
              &lt;/div&gt;
              &lt;!-- Grid row --&gt;
  
          &lt;/div&gt;
          &lt;!-- Footer Links --&gt;
  
          &lt;!-- Copyright --&gt;
          &lt;div class="footer-copyright text-center py-3"&gt;© 2018 Copyright:
              &lt;a href="https://mdbootstrap.com/bootstrap-tutorial/"&gt; MDBootstrap.com&lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- Copyright --&gt;
  
      &lt;/footer&gt;
      &lt;!-- Footer --&gt;</code></pre>
  </div>
  </div>
  </p>