Solución:
Disminuir la altura de la barra de navegación es más fácil en Bootstrap 4 usando las utilidades de espaciado. La altura de la barra de navegación proviene del relleno en el contenido de la barra de navegación.
Solo usa py-0
en el nav-link
y 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>
los py-0
conjuntos de clases padding-top:0;padding-bottom:0
en los artículos.
Altura de encogimiento de la barra de navegación Bootstrap 4
Si a alguien le gusta cambiar CSS para obtener el mismo resultado, pruebe este método. En mi caso acabo de cambiar el .navbar
min-height
y los enlaces font-size
y disminuyó la barra de navegación.
Por ejemplo:
.navbar{
min-height:12px;
}
.navbar a {
font-size: 11.2px;
}
Y esto también funcionó para aumentar la altura de la barra de navegación.
Esto también ayuda a cambiar el tamaño de la barra de navegación cuando se desplaza hacia abajo en el navegador.