Bootstrap Collapsed Responsive Navbar Height - html

Question

I have a Bootstrap menu with the following structure:
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="/">
<span class="title">Some Title</span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav" data-bind="foreach: navRoutes">
<li><a data-bind="css: { active: isActive() }, attr: { href: hash }, text: name"></a></li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-cogs"/> Admin<b class="caret"></b></a>
<ul class="dropdown-menu pull-right">
<!-- ko foreach: adminRoutes -->
<li><a data-bind="attr: { href: hash }, html: caption"></a>
<!-- /ko -->
</ul>
</li>
<li><a data-bind="click: logOff" href="#"><i class="icon-signout"/> Log Off</a></li>
</ul>
</div>
<div class="loader pull-right" data-bind="css: { active: showLoader }">
<i class ="icon-spinner icon-2x icon-spin" ></i>
</div>
</div>
</nav>
When the screen is resized such that the width reduces below the threshold set in #navbarCollapseWidth in variables.less the menu does indeed collapse. However the height of the navbar increases from 59px to 126px. If the width is increased back above the threshold then the navbar height reverts to a height of 59px. I want the navbar height to stay the same when collapsed i.e. to stay at 59px. Is the increase expected behaviour? How can I achieve the behaviour that I am looking for?

Answer 1

I found that the problem was actually the last div with a class of "loader pull-right" that was causing the problem. I worked around the problem by moving this div inside the div with a class of "nav-collapse collapse". Not entirely satisfactory - but better.