title: Bootstrap 4 mobile navbar
body: <p>I'm trying to create a mobile navbar with bootstrap4.</p>
  <p>When I try to scroll the navbar goes up without being fixed even with <code>fixed-top</code> in the class.</p>
  <p>Sharing the code below</p>
  <pre><code>&lt;nav class=&quot;navbar fixed-top&quot; &gt;
          &lt;!-- Navbar brand --&gt;
          &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;
            &lt;img class=&quot;logo&quot; src=&quot;images/logo.png&quot; alt=&quot;logo&quot; /&gt;
          &lt;/a&gt;
  
          &lt;!-- Collapse button --&gt;
          &lt;button
            class=&quot;navbar-toggler second-button&quot;
            type=&quot;button&quot;
            data-toggle=&quot;collapse&quot;
            data-target=&quot;#navbarSupportedContent23&quot;
            aria-controls=&quot;navbarSupportedContent23&quot;
            aria-expanded=&quot;false&quot;
            aria-label=&quot;Toggle navigation&quot;
          &gt;
            &lt;div class=&quot;animated-icon2&quot;&gt;
              &lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/button&gt;
  
          &lt;!-- Collapsible content --&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent23&quot;&gt;
            &lt;!-- Links --&gt;
            &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;menuLink&quot; style=&quot;text-align: right&quot; href=&quot;&quot;
                  &gt;WHO WE ARE
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;menuLink&quot; style=&quot;text-align: right&quot; href=&quot;&quot;
                  &gt;WHAT WE DO&lt;/a
                &gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;menuLink&quot; style=&quot;text-align: right&quot; href=&quot;&quot;
                  &gt;HOW WE GROW&lt;/a
                &gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a class=&quot;menuLink&quot; style=&quot;text-align: right&quot; href=&quot;&quot;
                  &gt;LET’S CONNECT&lt;/a
                &gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;!-- Links --&gt;
          &lt;/div&gt;
          &lt;!-- Collapsible content --&gt;
        &lt;/nav&gt;
        &lt;!--/.Navbar--&gt;
  </code></pre>
  <p>The logo is 75px by 65px and it gets cropped a bit when I scroll a bit down in mobile view.
  Sharing the screenshot below.
  <a href="https://i.stack.imgur.com/FVx0o.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FVx0o.jpg" alt="enter image description here" /></a></p>