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?
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;
}
}