How do you decrease navbar height in Bootstrap 4?

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.