Hamburger Menü nicht mit Navbar

Question

Ich versuche, die Navbar direkt unter dem Hamburger-Menü-Taste in der mobilen Ansicht gehen, wenn ich das Menü öffnen. Aber gerade jetzt geht es unter das Bild und hat ein unzusammenhängendes Aussehen.

Wie könnte ich es unter den Hamburger-Taste gehen?

Toggle Navigation

<!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Mission</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Staff</a></li> 
        <li><a href="#">Testimonials</a></li> 
       </ul> 
      </div> 
     </nav> 

https://jsfiddle.net/xbemtom0/4/

Answer 1

Wie unter dieser Arbeit hinzufügen, gab es für die Bild div Platzierung Problem.

<div class="row collapse navbar-collapse" id="collapsemenu"> 
<ul class="nav navbar-nav"> 
<li><a href="#">Home</a></li> 
<li ><a href="#">Mission</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Staff</a></li> 
<li><a href="#">Testimonials</a></li> 
</ul> </div> 

<div class="row picture" > 
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"/> 
</div> 

</div> 
</nav> 

(Oder)

<nav class="nav navbar-default"> 
<ul class="nav navbar-nav top-right"> 
<li>Search</li> 
<li>Language</li> 
<li>Account</li> 
<li>Bag</li> 
</ul> 
</nav> 
<div class="container header"> 
<div class="row top-right-nav"> 

</div> 

<div class="row picture" > 
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"/> 
</div> 

<nav class="navbar navbar-default"> 
<button type="button" class="navbar-toggle collapsed navbar-hamburger" 
data-toggle="collapse" 
data-target="#collapsemenu" 
> 
<span class="sr-only">Toggle Navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<div class="row collapse navbar-collapse" id="collapsemenu"> 
<ul class="nav navbar-nav"> 
<li><a href="#">Home</a></li> 
<li ><a href="#">Mission</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Staff</a></li> 
<li><a href="#">Testimonials</a></li> 
</ul> </div> 
</nav></div> 

<div class="container"> 

<div class="row"> 


<h2>hi</h2> 
</div><!-- row --> 
</div><!-- content container --> 

.top-right{ 
    float:right; 
}