すべてのデバイスでブートストラップのフルスクリーンメニュー

Question

私はnavbar-fixed-topを使用しています。バーガーアイコンを押すとナビゲーションバーの下にメニュー項目が全幅で表示されます。

メニューは画面の一番下まで表示されます。メニューが開いたら、バーガーアイコンはXアイコンに変わります。

この動作は、訪問者がどのデバイスを使用しているに関係なく発生します。

は、ここに私のdev siteだとここにモックアップだ：

mockup

あなたは私が全幅メニュー項目を達成しましたが、次の操作を行う方法についての私はわからないよ見ての通り：

• 希望の高さを達成する
• トグル時にバーガーアイコンがXに変わるようにする。

Answer 1

まずあなたが.navbar-collapseのために、すべての固定MAX-高さを削除する必要がある、あなたは340pxに設定し、その後の高さを設定します

.navbar-collapse { 
    height: 100vh; 
} 

これを100VHするには、ナビゲーション上の高さを設定していますnavbar to全体ビューポートの高さ。

第2に、ボタンのフォントアイコン（すなわちfontawesome）を使用してボタンの状態クラス.collapsedをターゲットにして、別のアイコンを追加してみてください。その後、

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
    <i class="icon fa fa-bars"></i> 
</button> 

そして、あなたはデフォルトのブートストラップバーに滞在し、Xにそれらをアニメーション化する場合は、あなたがこのフィドルを見てとることができ

.navbar-toggle.collapsed .icon:before { 
    content: '\f00d'; 
} 

を閉じるためにXとバーのアイコンを置き換えますhttps://jsfiddle.net/gndkmc5y/

あなたがしなければならないのは、トップクラス、ミドルクラス、ボトムクラスをバーに設定するだけです。