Navbar responsive Menü

Question

Ich mache ein Menü mit Twitter Bootstrap CSS. Für die mobile Version möchte ich einige Symbole zu Text hinzufügen. Ich möchte dies am Breakpoint von 768px tun (wenn das Hamburger Icon erscheint).

Menü 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>'); 
} 

aber die Breite ist nicht die tatsächliche Breite, die in dem Bootstrap-CSS verwendet wird. Ich möchte es ändern, wenn das Hamburger-Symbol erscheint. Ich habe auch versucht innereWidth des Fensters/Körper (Lösungen nach dem Suchen im Netz) .. Nichts funktioniert ..

Ich versuche jetzt, den "Zustand" des Menüs zu bekommen. Aber bis jetzt konnte ich keine Änderungen finden ..

Gibt es eine Möglichkeit (in JS/JQuery), den Status des Menüs zu erhalten? Oder eine Möglichkeit, die Breite zu lösen (ohne zusätzliches HTML hinzuzufügen ...)?

Answer 1

Versuchen Sie, Ihre jquery Logik in Medien Abfrage wie (die unten angegebene snipped nur ein Beispiel ist, müssen Sie sie nach Ihrem Bedarf ersetzen) konvertieren, versuchen

@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; 
    } 
} 

und dann.

Answer 2

Wenn Sie dies mit Medienabfragen in CSS arbeiten können, wäre dies wahrscheinlich der beste Weg, aber wenn Sie nicht den Text anstelle des Symbols setzen können, könnten Sie vielleicht etwas ausprobieren entlang dieser Linien in JS:

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