Stacked collapsible navbar in bootstrap 4

I would like to create a collapsible navbar. Everything works, but the nav items aren't stacked under each other like it should be. They are horizontally next to each other.

Code:

<nav class="navbar navbar-light bg-faded" role="navigation">

    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
        &#9776;
    </button>

    <div class="collapse navbar-toggleable-xs" id="collapsing-navbar">

        <a class="navbar-brand" href="/">Logo</a>

        <ul class="nav navbar-nav">


                <li class="nav-item">
                    <a href="/messages" class="nav-link">Messages</a>
                </li>

                <li class="nav-item">
                    <a href="/logout" class="nav-link">Logout</a>
                </li>

        </ul>

    </div>

</nav>

Screenshot: