How do I vertically center the contents of my Bootstrap navbar after increasing it's height?

A solution that I found is to increase the line-height of the links like this:

.navbar-nav li a {
     line-height: 50px; /* adjust until  satisfied*/
}

but that felt hacky as I need to do @media queries for smaller screens. I’m using SASS so I thought it would be nice if it’s possible to store the height of nav in a variable, and then set the line-height of my links to 50% of that like this:

$foo : /*height of nav*/

.navbar-nav li a {
   line-height: $foo;
}

Anyway, I might be overcomplicating this and there’s a painfully obvious solution that I’m missing. Mind helping me out?

Hi! What I did was to use padding for navbar-header and navbar-nav instead of using height for the navbar. I’m not sure if I understood your question. BTW, I’m just a newbie here.

.navbar-header {
    padding: 10px 0;
}

.navbar-nav {
    padding: 10px 0;
}