Aligning elements in a nav bar - css

Question

I have a nav bar with 3 li items. I have a forth item that I would like to align along the extreme left side of the bar. When I add the forth item as a div within the nav bar, the 3 li items are skewed to the right. I'm using bootstrap to style the nav bar. Here is the markup:
<nav class="navbar navbar-toggleable-md navbar-inverse">
<ul class="navbar-nav">
<li style="float: left; color: white">
My Text Here
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</ul>
</nav>
I've tried applying sone styles the forth item, but they have no affect. Any pointers?

Answer 1

You can take your first item out of the ul and put it inside an element with the navbar-brand class which auto pulls to the far left and styles the text so it is noticeable. You can also use the classes navbar-left and navbar-right to pull elements to the left or right.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-inverse">
<div class="container">
<div class="navbar-header navbar-left">
<p class="navbar-brand">My Text Here</p>
</div>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</ul>
</div>
</nav>

Answer 2

I recommend you to use standards that bootstrap provide. Always you can customize adding some classes. As you see I have add the brand to your nav, I think it was what you looking for.
Check the second nav, you can see there more usefull classes. (Check it snippet on full page).
Check the third nav is how to add your logo as an img.
.this-is-my-brand {
height:100%;
margin:10px;
font-family:Verdana;
text-shadow:1px 1px 1px #fa8911;
}
.logo{
width:25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse">
<ul class="navbar-nav">
<a class="navbar-brand this-is-my-brand" href="#">Brand</a>
<li style="float: left; color: white">
My Text Here
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="logo" alt="Brand" src="https://i.stack.imgur.com/MybMA.png">
</a>
</div>
</div>
</nav>