title: Bootstrap 4 - Sticky Navbar with fixed margin
body: <p>I'm trying to implement a navbar that has a 0.5em margin-top. As of now (you can take a look at this codepen: <a href="https://codepen.io/diegomengue/pen/yXboQg" rel="nofollow noreferrer">https://codepen.io/diegomengue/pen/yXboQg</a>), when you scroll the page, the margin goes missing. Is there a way to keep the margin sticky with the navbar?</p>
  
  <p>I'm using bootstrap 4.</p>
  
  <p>Code:</p>
  
  <pre><code>HTML:
  &lt;body&gt;
    &lt;nav class='navbar navbar-toggleable-xl mx-auto sticky-top'&gt;
      &lt;ul class='navbar-nav mx-auto'&gt;
        &lt;li class='nav-item'&gt;&lt;a href='#'&gt;Sobre mim&lt;/a&gt;&lt;/li&gt;
        &lt;li class='nav-item'&gt;&lt;a href='#'&gt;Portfólio&lt;/a&gt;&lt;/li&gt;
        &lt;li class='nav-item'&gt;&lt;a href='#'&gt;Contato&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/body&gt;
  
  CSS:
  body {
    height: 1000px;
  }
  .navbar{
    margin-top: 0.5em;
    background-color: #4B589D;
    width: 87%;
    border-radius: 3px;
    box-shadow: 0 0 10px grey;
  }
  
  li {
    padding: 0.3em 0.3em 0.3em 0.3em;
    margin: 0 0.3em 0 0.3em;
  }
  
  a {
    color: white;
  }
  </code></pre>
  
  <p>Thank you very much!</p>