带有下拉菜单的Bootstrap固定标题如何避免margin-top

Question

我有一个附加到固定标题的下拉菜单，需要在固定标题下方正确定位边距顶部。

这个 margin-top值会在移动视图 时发生变化，这会让事情变得更加复杂。

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid row">
    <div class="dropdown">

      <button class="btn dropdown-toggle col-md-1 col-sm-1 col-xs-1" id="dropdownMenu1" data-toggle="dropdown">
      <span class="glyphicon glyphicon-menu-hamburger"></span>
        <span>NAVIGATE</span>       
      </button>

    <div class="hidden-xs">
        <div class="col-md-2 col-sm-1 ">
            <h2>DESKTOP MENU</h2>               
        </div>
    </div>

    <div class="visible-xs">
        <div>
            <h2>MOBILE MENU</h2>
        </div>
    </div>

      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><input type="button" class="btn li-max-width" onclick="scrollTo('#ID1')" value="BUTTON 1"></li>
        <li><input type="button" class="btn li-max-width" onclick="scrollTo('#ID2')" value="BUTTON 2"></li>
        <li><input type="button" class="btn li-max-width" onclick="scrollTo('#ID3')" value="BUTTON 3"></li>
        <li><input type="button" class="btn li-max-width" onclick="scrollTo('#ID4')" value="BUTTON 4"></li>
        <li><input type="button" class="btn li-max-width" onclick="scrollTo('#ID5')" value="BUTTON 5"></li>
      </ul>

    </div>
</div>
</nav>

小提琴： http://www.bootply.com/oIXlolZ80E

如何避免一起使用动态边距？