How do I get full-height bootstrap nav buttons?

Question

The default bootstrap nav does this when the screen is too small:

The gap beneath the 'Hotels' button shouldn't be there when I hover over the link, it's caused by the 'Private Hire' text being too long and pushing the nav down a bit.

Is there any way to get the white background to take up the full height of the nav?

Answer 1

I have been looking into the twitter bootstrap navbar and i found a way to get rid of that whitespace.

Quite simple....

.navbar-nav{
    white-space: nowrap;
}

@media (min-width: 1200px){
    .navbar-nav {
        font-size: 22px;
    }
}
@media (min-width: 994px) and (max-width: 1199px){
    .navbar-nav {
        font-size: 17px;
    }
}
@media (max-width: 994px){
    .navbar-nav {
        font-size: 15px;
    }
}

How do I get full-height bootstrap nav buttons?

Sign up