title: Bootstrap dropdown on navbar pushing content down
body: <p>I'm using a dropdown option on the top navbar on bootstrap and it has one quirk, it pushes the content on the left of the navbar down as the navbar appears like so.</p>
  <h1>before click</h1>
  <p><a href="https://i.stack.imgur.com/kCXvR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kCXvR.png" alt="enter image description here" /></a></p>
  <h1>after click</h1>
  <p><a href="https://i.stack.imgur.com/Cxego.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cxego.png" alt="enter image description here" /></a></p>
  <p>This is the html used</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Notifications&lt;/title&gt;
  
      &lt;meta charset=&quot;utf-8&quot;/&gt;
  
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/notification.css&quot;&gt;
  
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-3.3.1.slim.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/popper.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Image and text --&gt;
      &lt;nav class=&quot;navbar navbar-light&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;
          &lt;img src=&quot;img/bootstrap-solid.svg&quot; width=&quot;30&quot; height=&quot;30&quot; class=&quot;d-inline-block align-top&quot; alt=&quot;&quot;&gt;
          Bootstrap
        &lt;/a&gt;
  
        &lt;ul class=&quot;navbar-nav&quot;&gt;
          &lt;li class=&quot;nav-item dropdown&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;
                Notifications &lt;span class=&quot;badge badge-secondary&quot;&gt;0&lt;/span&gt;
              &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;Action&lt;/a&gt;
                &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
                &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
              &lt;/div&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>