title: Bootstrap 4 Fixed top navbar shows collapsed and hides content
body: <p>I have already tried lot of threads on <a href="https://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site">SO</a> and also this <a href="https://stackoverflow.com/questions/45962300/vertical-fixed-top-navbar-on-bootstrap-4-beta">one</a> but couldn't get it done. I am trying to make one fixed navbar on top with bootstrap 4. But looks like the navbar is shifting towards top. I have tried by adding padding in <code>css</code> as suggested by official doc also but the content is shifting not the fixed navabar.
  Here is the default navbar image
  <a href="https://i.stack.imgur.com/g9R1R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g9R1R.png" alt="enter image description here"></a></p>
  
  <p>And this is the fixed navbar image I am getting 
  <a href="https://i.stack.imgur.com/c07Tz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c07Tz.png" alt="enter image description here"></a>
  I don't know what I am missing in this. Here is the code</p>
  
  <pre><code>&lt;nav class="navbar fixed-top navbar-light bg-light"&gt;
          &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
              &lt;ul class="navbar-nav"&gt;
                  &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="#/product"&gt;Products&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#/services"&gt;Services&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#/career"&gt;Career&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#/contact"&gt;Contact Us&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>Any help on this ?</p>