adding components before hamburger bootstrap4 - html

Question

I've got a navbar in Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="row">
<div class="w-100">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/svg/stopa-logo.svg" width="120">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu-margined-right">
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">We Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav lang-right">
<li class="nav-link">
<a class="nav-item" href="#">CZ</a>
</li>
<li class="nav-link">
<a class="nav-item" href="#">EN</a>
</li>
</ul>
</nav>
</div>
</header>
and I want to make that the language switch links will be before "MENU" burger, is this possible?:
LINK
Any ideas how I can do that? I haven't been able to find a solution.

Answer 1

Make ul absolute and place it with top and right coordinates.
Set both ul and li's to inline-block.
Example below:
ul.nav.navbar-nav.lang-right {
position: absolute;
right: 160px;
top: 7px;
display: inline-block;
}
li.nav-link {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<header class="row">
<div class="w-100">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/svg/stopa-logo.svg" width="120">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu-margined-right">
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">We Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav lang-right">
<li class="nav-link">
<a class="nav-item" href="#">CZ</a>
</li>
<li class="nav-link">
<a class="nav-item" href="#">EN</a>
</li>
</ul>
</nav>
</div>
</header>