How do you decrease navbar height in Bootstrap 4? - css

Question

Below is my code for bootstrap 4
<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link " >
<span class="icon icon18 icon-upload"></span>
Input Data From Prior Month
</a>
</li>
<li class="nav-item">
<a class="nav-link " >
<span class="icon icon18 icon-excel-file"></span>
Export to Excel
</a>
</li>
</ul>
<span class="navbar-text color-blue">
*Data Automatically pulled from sources
</span>
</div>
</nav>
there are various examples given for bootstrap 3 here
How do you decrease navbar height in Bootstrap 3?
but none of them seem to work for bootstrap 4, can anyone help with this one?

Answer 1

Decreasing the Navbar height is easier in Bootstrap 4 using the spacing utils. The height of the navbar comes from padding in the Navbar contents.
Just use py-0 in the nav-link and navbar-text..
<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link py-0">
<span class="icon icon18 icon-upload"></span> Input Data From Prior Month
</a>
</li>
<li class="nav-item">
<a class="nav-link py-0">
<span class="icon icon18 icon-excel-file"></span> Export to Excel
</a>
</li>
</ul>
<span class="navbar-text py-0 color-blue">
*Data Automatically pulled from sources
</span>
</div>
</nav>
The py-0 class sets padding-top:0;padding-bottom:0 on the items.
Bootstrap 4 Navbar Shrink Height

Answer 2

If anyone like changing CSS to get the same result, try this method. In my case I have just changed the .navbar min-height and the links font-size and it decreased the navbar.
For example:
.navbar{
min-height:12px;
}
.navbar a {
font-size: 11.2px;
}
And this also worked for increasing the navbar height.
This also helps to change the navbar size when scrolling down the browser.