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