漢堡導航欄不適用於固定位置

Question

我有一個Bootstrap菜單，我使用position：fixed來不滾動菜單，對於較小的顯示，burger菜單不起作用，當我刪除position：fixed時，它可以工作，但是菜單與頁面內容一起滾動：

我的HTML：

 <div class="col-sm-2">
            <div class="sidebar-nav">
                <div class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="navbar-collapse collapse sidebar-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Menu Item 1</a></li>
                            <li><a href="#">ITERM1</a></li>
                            <li><a href="#">ITEM2</a></li>
                            <li><a href="#">ITEM3</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="col-sm-10">
           content blabla
        </div>

我的CSS：

.navbar-default {
    position: fixed;
}

Answer 1

請在此處檢查示例代碼CODEPEN

HTML：

<div class="col-sm-12">
  <div class="sidebar-nav">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
      </div>
      <div class="navbar-collapse collapse sidebar-navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Menu Item 1</a></li>
          <li><a href="#">ITERM1</a></li>
          <li><a href="#">ITEM2</a></li>
          <li><a href="#">ITEM3</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>
</div>
<div class="col-sm-10">
  content blabla
</div>
</div>