Bootstrap 4 - 具有固定邊距的粘滯導航條

我正在嘗試實現一個具有0.5em margin-top的導航欄。到目前爲止（你可以看看這個codepen：https://codepen.io/diegomengue/pen/yXboQg），當你滾動頁面時，邊距就會丟失。有沒有辦法保持邊緣與導航欄粘性？Bootstrap 4 - 具有固定邊距的粘滯導航條

我使用的是引導4.

代碼：

HTML: 
<body> 
    <nav class='navbar navbar-toggleable-xl mx-auto sticky-top'> 
    <ul class='navbar-nav mx-auto'> 
     <li class='nav-item'><a href='#'>Sobre mim</a></li> 
     <li class='nav-item'><a href='#'>Portfólio</a></li> 
     <li class='nav-item'><a href='#'>Contato</a></li> 
    </ul> 
    </nav> 
</body> 

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; 
}

非常感謝您！

來源

2017-06-20 Diego Mengue