bootstrap 3 navbar with custom height issues - html

Question

I have created a custom height navbar with a large logo image and I'm sure I have missed something in the CSS because when the dropdown menu is clicked it jumps higher on the page until it is clicked a second time, and then the link works.
There is a "working" example at http://machadodesign.com/bootstrap/
Here is the CSS I have for the navbar
#media (min-width: 992px) {
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
min-height: 85px;
bottom: 0 ;
}
}
.navbar-nav li a {
padding-top: 30px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav .active a {
background: #f8f8f8;
text-shadow: 0px 0px 9px rgba(144, 169, 210, 1) !important;
}
.dropdown .active {
text-shadow: 0px 0px 9px rgba(144, 169, 210, 1) !important;
}
.navbar-brand {
height: inherit;
padding: 5px 15px;
}
.navbar-brand a{
padding-top: 0 !important;
}
.navbar-brand img {
height: 50px
}
.dropdown li, .dropdown li:hover {
/* padding-top: 10px;*/
padding-bottom: 0px !important;
/* min-height: 40px;*/
}
.dropdown li a {
padding-top: 10px;
padding-bottom: 0px !important;
min-height: 40px;
}
.logo-tag {
font-size: 10px;
font-style: italic;
font-weight: 700;
line-height: 14px;
letter-spacing: 0.04em;
}
#media (min-width: 768px) {
.logo-tag {
font-size: 13px;
font-style: italic;
font-weight: 700;
line-height: 14px;
letter-spacing: 0.04em;
}
.navbar-brand img {
height: 58px
}
.navbar-brand {
height: inherit;
padding: 3px 15px;
}
}
Here is the HTML of the navbar as I have it.
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid social-bar hidden-xs">
<div class="container">
<div class="row">
<div class="col-sm-9">Questions? Need help? Call now: [phone]</div>
<div class="col-sm-3 text-right">
<ul class="list-inline">
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-google-plus"></i></li>
<li><i class="fa fa-lg fa-youtube"></i></li>
<li><i class="fa fa-lg fa-rss"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" id="myNavbar" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<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="images/logo.png"><span class="logo-tag">Customer and Class Management Made Easy!</span>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Features <span class="caret"></span>
<ul class="dropdown-menu navbar-right">
<li>Features Overview</li>
<li>Easy Startup!</li>
<li>Easy to Use!</li>
<li>Easy to Customize!</li>
<li>Power-user Features</li>
<li>Multi-country</li>
<li>Lots of Add-ons</li>
</ul>
</li>
<li class="dropdown">
Try it Free <span class="caret"></span>
<ul class="dropdown-menu">
<li>Take a Test Drive</li>
<li>Get Started Today</li>
</ul>
</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-lock"></i> Login</li>
</ul>
</div>
</div>
</nav>
Any help is greatly appreciated.

Answer 1

The problem is right at the top of your provided CSS:
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
min-height: 85px;
bottom: 0 ;
}
It only retains its min-height if it is hovered over or in focus, which is why the click is causing the jump (triggering focus). Change it to this:
.navbar-default .navbar-nav > li > a {
min-height: 85px;
bottom: 0 ;
}