html - 汉堡导航栏不适用于固定位置

Question

我有一个 Bootstrap 菜单，我使用 position: fixed 不滚动菜单，对于小显示器，汉堡菜单不起作用，当我删除 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>