Menu separator appearing on next line

I am creating a new theme, but for some reason the menu isn’t displaying correctly. I want the separator to appear next to the menu items, but they are on the next line for some reason. This is what I am getting:

This is what I get when I inspect the element:

Here is the code to display the menu:

<nav class="navbar navbar-default navbar-eaglesnest">                   
    <?php 
        wp_nav_menu(array(
            'theme_locatiion' => 'primary',
            'container' => FALSE,
            'menu_class' => 'nav navbar-nav',
            'after' => '<font size=5px color=white>|</font>',
        )); 
    ?>
</nav>

And here’s the css:

.navbar-default {
    position: absolute;
    background-color: transparent;
    margin: 0px;
    padding: 0px;
    top: 30px;
    right: 20px;
    z-index: 1;
    border: 0px;
}

.navbar-default ul, .navbar-default li {
    display: inline-block;
    list-style-type: none;
    list-style-image: none;
    padding: 0;
}

.navbar-default ul a {
    padding: 0 20px 0 20px;
    line-height: 50px;
    text-decoration: none;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
}

.navbar-default ul a:hover {
    color: blue !important;
}

.navbar nav ul li.current-menu-item > a:link,
.navbar nav ul li.current-menu-item > a:visited,
.navbar nav ul li.current-page_ancester > a:link,
.navbar nav ul li.current-page_ancester > a:visited {
    text-decoration: underline !important;
}

Any help or suggestions are appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try doing

.navbar-default ul, .navbar-default li {
    display: flex;
    list-style-type: none;
    list-style-image: none;
    padding: 0;
}

You may need to style the spacing a bit differently but this should make them display in one line

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0