bootstrap navbar dropdown menu buttons werden nicht angezeigt, wenn navbar in minimiertem hamburger

Question

ich habe eine boostrap navbar mit einer css media query um sie zu reduzieren und sie über eine hamburger taste zu öffnen, wenn der bildschirm eine bestimmte größe unterschreitet (für mobile geräte)). Aber ich habe auch ein Dropdown-Menü innerhalb meiner Navbar, das funktioniert gut, wenn die Navbar im Vollbildmodus erweitert wird, aber wenn ich es aus der Hamburger-Version der Navigationsleiste öffne, werden die Schaltflächen im Dropdown-Menü nicht angezeigt.

WIDE SCREEN - NavBar DROPDOWN Adaequat:

SCHMALER SCREEN (Hamburger) - Dropdown-Menü Keine Taste SHOW:

Unterhalb der HTML-Code für das Navbar ist:

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="900"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="Son Of The Right Hand v.0.html#postWelcome">Son of the Right Hand</a> 
    </div> 


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active" id="home"><a href="Son Of The Right Hand v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">What is tSotRH?</a></li> 
     <li><a href="#">About Me</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Streams <span class="caret"></span></a> 
      <ul class="dropdown-menu pinkBackground"> 
      <li><a style="color:#062F4F" href="#">Stream 1</a></li> 
      <li><a style="color:#062F4F" href="#">Stream 2</a></li> 
      <li><a style="color:#062F4F" href="#">Stream 3</a></li> 
      </ul> 
     </li> 
     </ul> 


    </div> 
</nav> 

Dies ist die CSS-Medienabfrage, die die Navigationsleiste minimiert:

@media (min-width: 768px) { 
    .navbar .navbar-nav { 
     display: inline-block; 
     float: none; 
     vertical-align: top; 

    } 

    .navbar .navbar-collapse { 
     text-align: center; 
    } 
} 

Dies ist der CSS-Code für meinen Navbar:

.navbar-default { 
    z-index: 1; 
    background-color: #062F4F; 
    border-color: #062F4F; 
} 
/* title */ 
.navbar-default .navbar-brand { 
    color: #FFFFFF; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #813772; 
} 
/* link */ 
.navbar-default .navbar-nav > li > a { 
    color: #FFFFFF; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #813772; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #FFFFFF; 
    background-color: #813772; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
    color: #FFFFFF; 
    background-color: #062F4F; 
} 
/* caret */ 
.navbar-default .navbar-nav > .dropdown > a .caret { 
    border-top-color: #000000; 
    border-bottom-color: #000000; 
} 

Jede Hilfe viel zu schätzen wissen, warum die navbar Drop-Down-Tasten nicht zeigen, wenn das Menü von collaped mit der Hamburgeren Taste geöffnet (auch, Ich weiß, es ist wahrscheinlich ein ziemlich dummer und einfacher Fehler, aber ich kann es nicht finden)

Answer 1

das funktioniert gut, aber Ankerfarbe ist das gleiche wie Hintergrund, Sie müssen Klasse dafür verwenden und Farbe mit Medien Bildschirm ändern oder lassen die Standard Bootstrap Farbe auf Handy (grau)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
    .navbar-default { 
 
    z-index: 1; 
 
    background-color: #062F4F; 
 
    border-color: #062F4F; 
 
} 
 
/* title */ 
 
.navbar-default .navbar-brand { 
 
    color: #FFFFFF; 
 
} 
 
.navbar-default .navbar-brand:hover, 
 
.navbar-default .navbar-brand:focus { 
 
    color: #813772; 
 
} 
 
/* link */ 
 
.navbar-default .navbar-nav > li > a { 
 
    color: #FFFFFF; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: #813772; 
 
} 
 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: #FFFFFF; 
 
    background-color: #813772; 
 
} 
 
.navbar-default .navbar-nav > .open > a, 
 
.navbar-default .navbar-nav > .open > a:hover, 
 
.navbar-default .navbar-nav > .open > a:focus { 
 
    color: #FFFFFF; 
 
    background-color: #062F4F; 
 
} 
 
/* caret */ 
 
.navbar-default .navbar-nav > .dropdown > a .caret { 
 
    border-top-color: #000000; 
 
    border-bottom-color: #000000; 
 
} 
 
.navbar-default .navbar-nav .pinkBackground>li>a { 
 
    color:#062F4F ; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .navbar .navbar-nav { 
 
     display: inline-block; 
 
     float: none; 
 
     vertical-align: top; 
 

 
    } 
 

 
    .navbar .navbar-collapse { 
 
     text-align: center; 
 
    } 
 
} 
 

 
</style> 
 
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="900"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="Son Of The Right Hand v.0.html#postWelcome">Son of the Right Hand</a> 
 
    </div> 
 

 

 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active" id="home"><a href="Son Of The Right Hand v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">What is tSotRH?</a></li> 
 
     <li><a href="#">About Me</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Streams <span class="caret"></span></a> 
 
      <ul class="dropdown-menu pinkBackground"> 
 
      <li><a href="#">Stream 1</a></li> 
 
      <li><a href="#">Stream 2</a></li> 
 
      <li><a href="#">Stream 3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 

 
    </div> 
 
</nav>