How to make both a nav-brand and a log-in button in the same row as navbar

Question

I have a navbar that is fixed at top. On the left, there must be a company's logo and name together. On the right side, there must a be log-in button.

I've been looking at many examples on the web, but all of them use a navbar-toggler-right which it shouldn't appear at the navbar when the web page is in mobile.

This is my what I've been able to do so far:

<nav class="navbar fixed-top navbar-light bg-faded">
    <a class="navbar-brand d-inline-flex" href="#">
        <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo">
         Company's name
    </a>
    <div class="navbar-nav">
        <a class="nav-item">
            <button type="button" class="btn btn-primary"> Log In</button>
        </a>
    </div>
</nav>

But, I don't achieve the result that I want. The navbar-brand takes all the width and the log-in button appears in the following row.

Webpage Preview

How can I achieve the result that I want? I'm using Bootstrap 4 alpha 6.

Answer 1

<nav class="navbar fixed-top navbar-light bg-faded">
        <a class="navbar-brand d-inline-flex" href="#">
            <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo">
             Company's name
        </a>
        <div class="navbar-nav">
            <a href="#" class="btn btn-primary nav-item pull-right" role="button">Log In</a>
              </div>
    </nav>

Answer 2

Use the navbar-toggleable-xl to prevent the navbar from stacking vertically.

http://www.codeply.com/go/oJ1GetCfsL

<nav class="navbar fixed-top navbar-toggleable-xl navbar-light bg-faded">
    <a class="navbar-brand" href="#">
        <img src="http://placehold.it/90x90" width="30" height="30" class="d-inline-block align-top" alt="Company's logo">
         Company's name
    </a>
    <div class="navbar-nav ml-auto">
        <a class="nav-item">
            <button type="button" class="btn btn-primary"> Log In</button>
        </a>
    </div>
</nav>

By default, the navbar is always mobile (stacked vertically) unless overridden by one of the navbar-toggleable-* classes. Since you want the navbar to always remain horizontal, use the navbar-toggleable-xl class.