Alignment of list items navbar bootstrap 3.3.6 - html

Question

Please see code below or this bootply
I'm having some serious issues with this.
My issues:
I can't get all of the items in the navbar nicely aligned. Any ideas?
I don't want to show the searchfield on the mobile version, how omit?
Trying to insert the bootstrap glyphicon for search instead of the images in the css code for search, but how trigger glyphicon in css, can I make it dark or white?
<nav class="navbar navbar-inverse navbar-fixed-top my-navbar">
<div class="container">
<!-- 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="/boyt2">Company Name</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>• Link 1<span class="sr-only">(current)</span></li>
<li>Link 2</li>
<li>
<form class="navbar-form navbar-left searchsite" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Username <span class="caret"></span> <img src="http://placehold.it/30x30">
<ul class="dropdown-menu noshadow">
<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>
<!-- JavaScript files should be linked at the bottom of the page -->
<script src="js/jquery.min.js"></script>
<!-- Latest compiled and minified Javascript -->
<script src="js/bootstrap.min.js"></script>

Answer 1

Add this CSS:
#media (min-width: 768px) {
.navbar .navbar-brand {
padding: 20px 15px;
}
.navbar .nav:not(.navbar-right) > li > a {
padding: 20px 15px;
}
.navbar-form {
margin-top: 14px;
}
}
The image in the navbar-right is causing the navbar to be 60px tall instead of the default 50px, 20px padding will center the elements.
To hide the searchbar on mobile, you can add the class hidden-xs:
<form class="navbar-form navbar-left searchsite hidden-xs" role="search">
</form>

Answer 2

For the search button, try using font-awesome, it would look better (there is a white/black version (http://fontawesome.io/icon/search/))
Refer to this link: How to center navbar elements vertically (Twitter Bootstrap)?
for the vertical centering
Use this (set the class to hidden-phone hidden-tablet) to remove search on mobile
<li class="hidden-phone hidden-tablet">
<form class="navbar-form navbar-left searchsite" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
Hope this helped! (Try to accept the answer if it works) :)

Answer 3

the misalignment is due to height of the image of your image in .navbar-right
to hide the search in mobile you can use hidden-xs
to use the search icon you can use glyphicons that bootstrap already has.
You can check them here
.glyphicon-search {
color: white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top my-navbar">
<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="/boyt2">Company Name</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 hidden-xs" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Username <span class="caret"></span> <img src="http://placehold.it/20x20">
<ul class="dropdown-menu noshadow">
<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>