Aurelia - Adding a list item username - to the navmenu creates an entry black on black and incorrectly positioned - aurelia

Question

I need to display the name of the user next to the logout option on my navbar. The way I did this was as follows:
<ul class="nav navbar-nav navbar-right">
<li>${userName}</li>
<li repeat.for="row of router.navigation" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
I thought that if I added another list item it in the nav navbar-nav it would display as all the other menu items do. Instead I got:
I have highlighted the name admin as, if I didnt it would be black on black. Its not receiving the correct styling as the other menu items have.
How do I render the admin list item so it displays like all the other list items?
EDIT
Looking at the question it was pointed out it was light on on background. It was late at night.
Yes I am using bootstrap version 3.
Here is the full html of the navbar view model:
<template>
<require from="./navmenu.css"></require>
<div class="main-nav">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/home">Jobsledger</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li repeat.for="row of routes" if.bind="row.settings.pos == 'left'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
<a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="row.settings.nav">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="row.settings.nav" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>${userName}</li> //HERE - THIS LINE DOESNT RENDER PROPERLY.
<li repeat.for="row of routes" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
<a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="row.settings.nav">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="row.settings.nav" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
${userName}
</template>
Here is the typescript file behind it:
import { autoinject, bindable, bindingMode } from "aurelia-framework";
import { Router } from 'aurelia-router'
import { AuthService } from '../../auth/auth-service'
#autoinject
export class Navmenu {
public userName: string = 'anonymous';
private userRole = localStorage.getItem("user_role");
constructor(public authService: AuthService, public router: Router) {
this.userName = authService.getUserName();
}
get routes() {
return this.router.navigation.filter(r => r.settings.roles.indexOf(this.userRole) > -1);
}
}
I wanted to separate the left menu items with the right menu items so there are two sections. This is the right side where you have the user name and the option to logout. The display of the user name is done as a list item in the unordered list tag but before repeat for the right menu items.