Navbar対応メニュー

Question

私は、TwitterのブートストラップCSSでメニューを作っています。モバイル版では、いくつかのアイコンをテキストに追加したいと思っています。 768pxのブレークポイント（ハンバーガーアイコンが表示されたとき）でこれを行いたいと思います。

メニューHTML

<div class="navbar-collapse collapse"> 
    <nav role="navigation" class="navigation"> 
     <ul class="menu nav navbar-nav" style="margin-left: 95.5px; margin-right: 0px;"> 
      <li class="first leaf active" id="homeLink"><a href="/"><i class="fa fa-home fa-lg"></i></a></li> 
      <li class="leaf"><a href="/link">item</a></li> 
      <li class="leaf"><a href="/link">item</a></li> 
      <li class="last leaf" id="contactLink"><a href="/contact">Contact</a></li> 
     </ul> 
    </nav> 
</div> 

Javascriptを

if(jQuery("body").prop("clientWidth") > 768){ 
    jQuery("#contactLink").html('<a href="/contact"><i class="fa fa-envelope fa-lg"></i></a>'); 
} 

しかし幅は、ブートストラップCSSで使用されている実際の幅ではありません。私はハンバーガーのアイコンが現れたらそれを変更したい。私はウィンドウ/ボディ（ネットを検索した後のソリューション）のinnerWidthも試しました..何も動作しません..

私は今、メニューの "状態"を取得しようとしています。しかし、これまでのところ、私は変更を見つけることができませんでした..

メニュー（JS/JQueryで）の状態を取得する方法はありますか？または、余分なHTMLを追加せずに幅を解決する方法...？

Answer 1

は

@media (max-width: 768px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 

、（下記のスニップは一例であり、あなたがあなたの必要性に応じてそれらを交換する必要がある）のようなメディアクエリーにあなたのjqueryのロジックを変換してみて、それからしてみてください。

Answer 2

あなたは、これはCSSメディアクエリで動作するように得ることができる場合、これはおそらく、それについて移動するための最良の方法だろうが、あなたはこれを行うことによって、テキストの代わりにアイコンを設定することができないならば、あなたは多分何かを試みることができますJSのこれらの行に沿って：

if ($(window).width() < 739) {  
    //code to set the html to text 
} 
else { 
    //code with icon 
}