Custom height Bootstrap's navbar

Question

I want a header with a height of 150px which contains a navbar. The navbar should be vertically centered in the header.

HTML:

Answer 1

For Bootstrap 4, there are now spacing utilities so it's easier to change the height via padding on the nav links. This can be responsively applied only at specific breakpoints (ie: py-md-3). For example, on larger (md) screens, this nav is 120px high, then shrinks to normal height for the mobile menu. No extra CSS is needed..

    
        
    
    Brand
    

        

            
Home
            
Link
            
Link
            
More
            
Options
        
    

Bootstrap 4 Navbar Height Demo