How to increase Bootstrap 3 Navbar height while keeping menu height small when collapsed

Question

I am trying to increase the height of a top-fixed Bootstrap 3 navbar to 80px, but want to keep the original min-height at 50px, when the menu is collapsing (i.e. screen widths o

Answer 1

Your logic is backwards. Right now it'll only apply that 50px height for pages WIDER than 768px. This should fix it:

.navbar-fixed-top {
    min-height: 80px;
}

.navbar-fixed-top .navbar-collapse {
    max-height: 80px;
}

@media (min-width: 768px) {
    .navbar-fixed-top .navbar-collapse {
        max-height: 50px;
    }
}

Answer 2

I finally developed a solution myself. You have to create a media query that keeps the line height of the collapsing menu at 20px for screen widths up to 767px. The following CSS in my style.css overrides the boostrap.css and solved my problem:

.navbar-fixed-top {
    min-height: 80px;
}

.navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 80px;
}

@media (max-width: 767px) {
    .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;}
}