My goal is to create a double navbar using the latest version of Bootstrap 4 (alpha6).
http://codepen.io/anon/pen/qrERBP
<nav class="navbar navbar-toggleable-md navbar-light navbar-inverse bg-faded" style="background-color: #000000">
<button class="navbar-toggler navbar-toggler-right navina" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <div class="navbar-header"> -->
<a class="navbar-brand navina" href="/">
<img src="/images/logow.png" class="img-fluid" alt="Responsive image">
</a>
<ul class="navbar-nav navina hidden-lg-up float-right">
<img src="/images/search.png">
</ul>
<!-- </div> -->
<!-- <div id="navbarNavDropdown" class="navbar-collapse collapse"> -->
<ul class="navbar-nav mr-auto">
</ul>
<ul class="navbar-nav navina hidden-md-down">
<li class="nav-item navina">
<a class="nav-link" href="/kosik/">
<img src="/images/kosik.png" class="img-rounded" aria-hidden="true" style="height:25px; width:25px"> Košík
<span class="badge"></span>
</a>
</li>
<li class="nav-item dropdown navina">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img src="/images/pouz.png" class="img-circle" style="height:25px; width:25px"><span class="caret"></span>
Používateľ
</a>
<div class="dropdown-menu my-2 my-lg-0" aria-labelledby="navbarDropdownMenuLink" align="right">
{{# if login}}
<a class="dropdown-item" href="/user/userprofile">Tvoj účet</a>
<a class="dropdown-item" href="/user/logout">Odhlásiť</a>
{{ else }}
<a class="dropdown-item" href="/user/login">Prihlás sa</a>
<a class="dropdown-item" href="/user/signup"> Zaregistrovať </a>
{{/if}}
</div>
</li>
</ul>
<!-- </div> -->
</nav>
When the viewport size is medium or smaller, I want the lower navbar to transform into a right-aligned burger menu on the upper navbar. The user and shopping cart icons, along with a search icon, should be positioned to the left of this burger menu.
However, when collapsing, the new icons end up below the brand element.
I've tried various methods over nearly three days, but nothing seems to work, such as adding additional <button>s that stack on top of each other or playing around with floating elements and margins.
If I move the <div> elements before the <brand>, everything stacks above the Brand after collapsing.