CSS - Change position of buttons on bootstrap navbar - css

Question

I have problem with positioning of buttons on bootstrap navbar. They are not aligned with website title and they are too close together. The code looks like this:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button></li>
<li><button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</nav>
https://jsfiddle.net/mleontenko/poqbkxrt/
I need to align buttons to website name and add a little bit of space between the two buttons. CSS trick that solves this would be appreciated.

Answer 1

Here you go with a solution https://jsfiddle.net/poqbkxrt/1/
li {
margin: 10px 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button></li>
<li><button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</nav>
Hope this will help you.

Answer 2

By default the .nav on the .navbar component relies on hyperlinks for its navigation. Those hyperlinks have padding defined by Bootstrap's CSS to properly space each item in relation to the .navbar-brand.
Since you are using <button> elements you will need to add your own CSS, such as the following:
.navbar-nav .btn {
margin-top: 8px;
}

Answer 3

This code is working for you !!
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
<ul class="nav navbar-nav ">
<li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button>
<button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</div>
</nav>
HAPPY TO HELP !!