themes – 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:

enter image description here

This is what I get when I inspect the element:

enter image description here

Here is the code to display the menu:

<nav class="navbar navbar-default navbar-eaglesnest">                   
            'theme_locatiion' => 'primary',
            'container' => FALSE,
            'menu_class' => 'nav navbar-nav',
            'after' => '<font size=5px color=white>|</font>',

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.