Web/ Design/ Vista

Resources for Designers & Developer

How to Decrease the Height of Navbar on Bootstrap 4

Navbar height in Bootstrap 4 comes from padding on its link elements and also from padding on the main navbar. To reduce height you need to remove padding on both.

Add py-0 class to all link elements

<a class="navbar-brand py-0" href="#">Navbar</a>
<a class="nav-link py-0" href="#">

This class sets padding-top and padding-bottom to 0.

Next set the padding-top and padding-bottom of navbar class to 0.

.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
 }

Navbar will now be reduced to minimum height possible. If you want the navbar to have a minimum height ( say 40px ), use the following code –

.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 40px !important;
 }

Note that the py-0 class works for Bootstrap 4 only. For Bootstrap 3, use the following code –

.navbar a,
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.navbar {
   min-height: 40px !important // in case you want to have a minimum navbar height
}

Thats it! Did that work for you? Send me feedback in the comments below.