Bootstrap 4 navbar item jumps below and wraps

I'm trying to make a navbar with latest bootstrap4 (alpha6).

<nav role="navigation" class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="/">
   <img src="/public/img/logo.png" height="36" alt="myLogo">
   <span class="navbar-text">Food on Track</span>
</a>
<ul class="ml-auto nav">
    <li class="nav-item">
        <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;">
            <g><path d="..."></path></g>
        </svg>
    </li>
</ul>

What is the best way to make nav brand and items fit one line using bootstrap 4? Here's a link to Codeply