汉堡导航栏不适合固定位置

时间:2016-09-02 08:15:05

标签: html css twitter-bootstrap twitter-bootstrap-3

我有一个Bootstrap菜单,我使用的位置:固定不滚动菜单,对于小显示,汉堡菜单不起作用,当我删除位置:固定时,它工作但菜单滚动页面内容:

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

1 个答案:

答案 0 :(得分:0)

请在此处查看示例代码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>