title: How to sticky top a navbar in bootstrap4?
body: <p>I want to have this navbar to be sticky top but it just doesn't work. However I add sticky top to the nav element but nothing happed. I even tried sticky top in container-fluid and row but just it doesn't work</p>
  <pre><code> &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;nav class=&quot;col-12 mt-3 navbar navbar-expand-sm navbar-light bg-light sticky-top&quot;&gt;
                  &lt;button class=&quot;navbar-toggler mx-auto&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
                
                  &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
                    &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
                      &lt;li class=&quot;nav-item active&quot;&gt;
                          &lt;a id=&quot;a-links&quot; class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                          &lt;a id=&quot;a-links&quot; class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Man&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                          &lt;a id=&quot;a-links&quot; class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Woman&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                          &lt;a id=&quot;a-links&quot; class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Kids&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;
                          &lt;a id=&quot;a-links&quot; class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Baby&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;!-- Dropdown menu --&gt;
                      &lt;li class=&quot;nav-item dropdown d-md-none d-block&quot;&gt;
                          &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdownMenuLink&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                              More
                          &lt;/a&gt;
                          &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdownMenuLink&quot;&gt;
                              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Sign in&lt;/a&gt;
                              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Youe Bag&lt;/a&gt;
                              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;ios App&lt;/a&gt;
                              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Andriod App&lt;/a&gt;
                          &lt;/div&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;form class=&quot;form-inline my-2 my-lg-0&quot;&gt;
                      &lt;input class=&quot;form-control col-md-8 mr-2 w-50&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
                      &lt;button class=&quot;btn btn-outline-danger my-2 my-sm-0&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>