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.
Copyright Web/ Design/ Vista 2022 ©