bootstrap 3 navbar with custom height issues

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: (866) 214-6128</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>
            <a href="#" class="navbar-brand"><img src="images/logo.png"><span class="logo-tag">Customer and Class Management Made Easy!</span></a>
        </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"><a href="#">Home</a></li>
                <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features <span class="caret"></span></a>
          <ul class="dropdown-menu navbar-right">
            <li><a href="features.html">Features Overview</a></li>
            <li><a href="easystart.html">Easy Startup!</a></li>
            <li><a href="easyops.html">Easy to Use!</a></li>
            <li><a href="customize.html">Easy to Customize!</a></li>
            <li><a href="poweruser.html">Power-user Features</a></li>
            <li><a href="country.html">Multi-country</a></li>
            <li><a href="add-ons.html">Lots of Add-ons</a></li>
          </ul>
        </li>
                <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Try it Free <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="demo.html">Take a Test Drive</a></li>
            <li><a href="signup.html">Get Started Today</a></li>
          </ul>
        </li>
                <li><a href="pricing_US.html">Pricing</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-lock"></i> Login</a></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 ;
}