bootsrap nav not responding well when layout changes - asp.net

Question

<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-brand pull-left">
<a href="#" class="pull-left">
<img width="150" height="45" class="navbar-left" src="Intellicell_files/IntelliCell-Logo.png" /></a>
</div>
<button class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse pull-right">
<ul class="nav navbar-nav navbar-right navbar-text">
<li><a id="homeLink" href="#" data-target="home_container">Home</a></li>
<li><a id="contractslink" href="Contracts.aspx">Contracts</a></li>
<li><a id="accounts" href="AccountHistory.aspx">Account History</a></li>
<li>Contact Us</li>
<li><a id="refer" href="#">Refer a Friend</a></li>
<li><a id="tracker" href="#">Incentive Tracker</a></li>
</ul>
</div>
</div>
<div class="center-block" id="divider">
<div class="nav-divider">
<h4 class="text-center">HOME</h4>
<%--<asp:Button Text="Logout" CssClass="btn btn-group-sm form-control" ID="btnLogOut" runat="server" align="right" OnClick="btnLogOut_Click"/>--%>
</div>
</div>
</div>
the problem comes when I test the Navbar on a tablet and that causes the navbar to go under the logo that i have put there, so i was wondering if there is a way of making sure that the nav logo and the nav options are always on the same line. i am using bootstrap by the way

Answer 1

One option is to reduce the padding between your links.
Also, see the Docs regarding how to structure a default navbar.
.navbar .navbar-brand {
padding-top: 3px;
}
#media (min-width: 768px) {
.navbar .navbar-nav > li > a {
padding-left: 8px;
padding-right: 8px;
}
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img width="150" height="45" src="http://placehold.it/150x45/f00" />
</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a id="homeLink" href="#" data-target="home_container">Home</a>
</li>
<li><a id="contractslink" href="Contracts.aspx">Contracts</a>
</li>
<li><a id="accounts" href="AccountHistory.aspx">Account History</a>
</li>
<li>Contact Us
</li>
<li><a id="refer" href="#">Refer a Friend</a>
</li>
<li><a id="tracker" href="#">Incentive Tracker</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 2

<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<div class="navbar-brand">
<a href="#">
<img height="45" class="navbar-left" src="http://i.ytimg.com/vi/PDfWeUP09TA/hqdefault.jpg" /></a>
</div>
<ul class="nav navbar-nav navbar-right navbar-text">
<li><a id="homeLink" href="#" data-target="home_container">Home</a></li>
<li><a id="contractslink" href="Contracts.aspx">Contracts</a></li>
<li><a id="accounts" href="AccountHistory.aspx">Account History</a></li>
<li>Contact Us</li>
<li><a id="refer" href="#">Refer a Friend</a></li>
<li><a id="tracker" href="#">Incentive Tracker</a></li>
</ul>
</div>
</div>
<div class="center-block" id="divider">
<div class="nav-divider">
<h4 class="text-center">HOME</h4>
<%--<asp:Button Text="Logout" CssClass="btn btn-group-sm form-control" ID="btnLogOut" runat="server" align="right" OnClick="btnLogOut_Click"/>--%>
</div>
</div>
</div>
ul li a{
padding-left: 10px !important;
padding-right: 10px !important;
}
Im not frontend, but it should help :)
I wrapped img and ul by div, and thru smaller padding get img to row with menu.
Its just a suggest, problem is, ul li a is too big, and push img up