Bootstrap - Positioning Jasny Offcanvas要素

Question

私はブートストラップ3とJasnyを使用するアプリを開発中です。私のアプリは2つのナビゲーションバーを持っています。 1つはメインナビゲーション項目用、もう1つは子ナビゲーション項目用です。アプリのメインエリアには、「追加」ボタンがあります。ユーザーが追加ボタンをクリックすると、Jasnyを使用していくつかのフォーム要素を表示したいと思います。これを実行しようとする試みで、私はこれで、このJSFiddleに示すコードを、使用しています：

<header> 
    <nav class="navbar" style="background-color:#2e2e2e; border-radius:0rem;"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu"> 
      <span class="sr-only">Toggle navigation</span> 
     </button> 
     <a class="navbar-brand hidden-xs" href="/" style="color:white;">Welcome</a>   
     </div> 
    </div>  
    </nav> 
</header> 

<main> 
    <nav class="navbar" style="background-color:#5e5e5e; border-radius:0rem; position:relative; top:-20px;"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu"> 
      <span class="sr-only">Toggle navigation</span> 
     </button> 
     <a class="navbar-brand hidden-xs" href="/" style="color:white;">Subnav</a>   
     </div> 
    </div> 
    </nav> 

    <div class="container-fluid">  
    <div class="container"> 
     <button class="btn btn-primary" data-toggle="offcanvas" data-target="#mySlideout">Add Item</button> 

     <nav id="mySlideout" class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation" style="width:400px;"> 
     <a class="navmenu-brand" href="#">Add New Item</a> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 

     <form id="addForm" action="/add" method="post" role="form"> 
      <div class="row"> 
      <div class="col-md-8"> 
       <div class="form-group"> 
        <label class="control-label" for="Name">Name</label> 
        <input class="form-control" id="Name" name="Name" type="text" value="" autocomplete="off"> 
       </div> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-sm-5"> 
       <button class="btn btn-default">Cancel</button> 
       <button class="btn btn-primary">Save</button> 
      </div> 
     </div> 
    </form> 
</nav>  
    </div> 
    </div> 
</main> 

私の挑戦、それはにスライドoffcanvasパネルの位置にあることは、全体の高さを占めます。画面の、それは素晴らしいです。しかし、私はそれがサブナビの下に現れるようにしたい。 JSFiddleでその様子を見ることができます。

+-------------------------------------------------------------------+ 
| Welcome               | 
+-------------------------------------------------------------------+ 
| Subnav               | 
+------------------------------------------------+------------------+ 
| [add item]          | Add New Item x | 
|            +------------------+ 
|            | Name    | 
|            | _______________ | 
|            |     | 
|            |     | 
|            |     | 
|            |     | 
|            |     | 
|            |     | 
|            |     | 
|            | [save] [cancel] | 
+-------------------------------------------------------------------- 

スケッチは、上記offcanvasパネルのトップはsubnavコンテナの下にあることを示しています。しかし、現実には、私はこのようなものを作成しようとしています。どうすればこれを達成できますか？

Answer 1

サブメニューの上部に余白を追加します。

<nav id="mySlideout" class="navmenu navmenu-default 
    navmenu-fixed-right offcanvas" role="navigation" 
style="width:400px; margin-top:100px;"> 

https://jsfiddle.net/fhz2peg6/