bootstrap navigation Änderung

Question

Ich versuche, eine Bootstrap-Navigationsleiste zu ändern, und jedes Mal, wenn ich versuche, das CSS mit meinen eigenen zu ändern scheint es nicht zu nehmen. Ich habe ein Hamburger-Menü-Symbol, das ich nur in Handy erscheinen möchte, also änderte ich das in meinem CSS, um anzuzeigen: keine; für Medienabfragen über 769px und Anzeige: Inline; für Displays unter 768px. Die Schaltfläche wird weiterhin auf Desktops angezeigt. HTML:

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="index.html">HOME<span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="pages/about.html">ABOUT</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="blog.php">BLOG</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="pages/video.html">VIDEOS</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="pages/photos.html">PHOTOS</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="pages/podcasts.html">PODCASTS</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="pages/recaps">RACE RECAPS</a> 
     </li> 
    </ul> 
    </div> 
    <div id="logo"> 
    <a class="navbar-brand" href="#">LOGO</a> 
    </div> 
    </nav> 

Die CSS:

@media screen and (min-width 769px) { 
button .navbar-toggler .navbar-toggler-left { 
    display:none; 
} 
} 
@media screen and (max-width 768px) { 
button .navbar-toggler .navbar-toggler-left { 
    display:inline; 
} 
} 

Hinweis: Ich habe die CSS ohne "Knopf" versucht und genauso gut die Klassen. Ich habe auch versucht, den Knopf in einem Div zu wickeln, kein Glück.

Answer 1

Die CSS-Klasse Selektoren sollten keine Leerzeichen haben, wenn sie auf das gleiche Element verweisen:

@media screen and (min-width 769px) { 
button.navbar-toggler.navbar-toggler-left { 
display:none; 
} 
} 
@media screen and (max-width 768px) { 
button.navbar-toggler.navbar-toggler-left { 
display:inline; 
} 
} 

bearbeiten

Fügen Sie auch die Doppelpunkte in min-width: 769px und max-width: 768px.

Answer 2

Here is working example

Spaces sucht Nachkommen links nach rechts.

Es sei denn, Sie verwenden, ist es .navbar-toggler irgendwo sonst unnötig jede Klasse des Elements

@media screen and (min-width: 769px) { 
    .navbar-toggler { 
     display: none; 
    } 
} 

@media screen and (max-width: 768px) { 
    .navbar-toggler { 
     display: inline; 
    } 
}