Bootstrap navbar-toggle is not at the top - html

Question

So I have this issue, I'm trying to get the navbar-toggle to get up into the corner but it's over lapping.
I also have a icon in pc view that over lapping which I really like.
Is there a way to fix the navbar-toggle??
My code is below.
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<img class="visible-xs img-rounded pull-right" src="smallicon2.png" alt="" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand page-scroll">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="icon2.png" class="img-rounded hidden-xs" />
</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 navbar-right">
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#">Home</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Thanks for looking.

Answer 1

In bootstrap CSS, Following causing the issue padding: 15px;
.navbar-brand {
float: left;
height: 50px;
padding: 15px;
font-size: 18px;
line-height: 20px;
}
This may fix the issue padding: 0px 15px; but it will effect the logo too
.navbar-brand {
float: left;
height: 50px;
padding: 0px 15px;
font-size: 18px;
line-height: 20px;
}
Fiddle
Proper Fix without effecting the logo, change margin-top: 8px; to margin-top: -5px; to following CSS in bootstrap css file
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: -5px; <<<< Here
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
Fiddle
Note: Better approach do not edit bootstrap css, make customstyle.css and add above css with !important rule in custom css.

Answer 2

Don't waste your time with fixing. Copy and paste the complete navbar from Bootstrap navbar. After that, delete HTML you don't need, correctly!
The problem often begins if you want to have a navbar with a bigger logo.
Here is a precise instruction how to create a Bootstrap navbar with a bigger logo.