Jasny bootstrap Off Canvas 菜单：如何强制菜单在导航栏下滑动？

Question

我想添加静态（不可移动）header到off canvas push menu。

这是我目前拥有的：codePen link

<span>This text should not move</span>

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
      <a class="navmenu-brand" href="#">Project name</a>
      <ul class="nav navmenu-nav">
        <li><a href="../navmenu/">Slide in</a></li>
        <li class="active"><a href="./">Push</a></li>
        <li><a href="../navmenu-reveal/">Reveal</a></li>
        <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
      </ul>
    </div>

    <div class="navbar navbar-default"> -------------------- navbar should not move -----------------------
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas=".container">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="container">
        <h1>Content that should move. Menu should slide from the left side UNDER the navbar</h1>
    </div>

问题是我不知道如何在 'navbar' 下强制菜单滑动。有什么想法吗？

Answer 1

您需要添加 top:120px 以使其显示在导航栏下方

.navmenu-fixed-left, .navmenu-fixed-right, .navbar-offcanvas {
  position: fixed;
  z-index: 1050;
  top: 120px;
  bottom: 0;
  overflow-y: auto;
  border-radius: 0;
}

DEMO

Jasny bootstrap Off Canvas 菜单：如何强制菜单在导航栏下滑动？

Jasny bootstrap Off Canvas menu: how to force menu slide under the navbar?

javascript

css

jasny-bootstrap