2017-06-21 14 views
0

私は小さなプロジェクトで折りたたみ可能なNavbarを実装しようとしています。私の問題は、ウィンドウのサイズを変更すると、navbarが折り​​たたまれますが、ボタンがクリック可能であっても表示されず、オプションも表示されません。ブートストラップのnavbarの崩壊アイコンが表示されず、動作しない

jQuery/JSの問題かどうかわかりません。私はちょうど初心者ですので、私はちょうどcodepenの設定でいくつかのライブラリをリンクしました。私は人々がこれに関して持っていたいくつかの問題を見ましたが、解決策のどれもが私を助けませんでした。

codepenのリンクは、https://codepen.io/diegomengue/pen/XgRamNです。

件名に関するヘルプ(また、すべての種類のヒント)は高く評価されています。

ありがとうございます。

HTML:

<nav class='navbar navbar-toggleable-sm mx-auto sticky-top'> 
    <button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarNav"> 
    <ul class='navbar-nav mx-auto'> 
    <li class='nav-item'><a href='#sobreMim' class='nav-link'><strong>Diego Mengue</strong></a></li> 
    <li class='nav-item'><a href='#portfolio' class='nav-link'>Portfólio</a></li> 
    <li class='nav-item'><a href='#contato' class='nav-link'>Contato</a></li> 
    </ul> 
    </div> 
    </nav> 

答えて

1

ナビゲーションバートグラークラスは、ナビゲーションバー-配色型クラスを期待しています。カスタムスタイル

にナビゲーションバー-トグラークラスのスタイルを追加し、利用できるカラースキームをフォローしたいいけない場合

<nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'> 
    <button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
     <div class="collapse navbar-collapse" id="navbarNav"> 
    <ul class='navbar-nav mx-auto'> 
     <li class='nav-item'><a href='#sobreMim' class='nav-link'><strong>Diego Mengue</strong></a></li> 
     <li class='nav-item'><a href='#portfolio' class='nav-link'>Portfólio</a></li> 
     <li class='nav-item'><a href='#contato' class='nav-link'>Contato</a></li> 
    </ul> 
    </div> 
    </nav> 

https://codepen.io/dannybrown/pen/yXXBxK?editors=1100

このペンをお試しください

関連する問題