Large navbar
Increase height of the navbar by adding .navbar-lg class to the main .navbar container. Large navbar height is ~64px including borders, all navbar components are adjusted to the large navbar height automatically.
Large navbar example:
Large navbar markup:
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-static navbar-lg navbar-expand-lg">
<!-- Mobile togglers -->
<div class="d-flex flex-1 d-lg-none">
...
</div>
<!-- /mobile togglers -->
<!-- Navbar brand -->
<div class="navbar-brand flex-1 flex-lg-0 text-center text-lg-left">
...
</div>
<!-- /navbar brand -->
<!-- Collapsible navbar content -->
<div class="collapse navbar-collapse order-2 order-lg-1" id="navbar-mobile">
...
</div>
<!-- /collapsible navbar content -->
<!-- Content that remains visible on mobile -->
<div class="flex-row order-1 order-lg-2 flex-1 flex-lg-0 justify-content-end align-items-center">
...
</div>
<!-- /content that remains visible on mobile -->
</div>
<!-- /main navbar -->
Default navbar
Default navbar height is ~55px including borders. Navbar container doesn't have any height properties in CSS, so if you change vertical padding of navbar navigation items or brand height, computed navbar height will be adjusted automatically thanks to the power of SASS.
Default navbar example:
Default navbar markup:
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-static navbar-expand-lg">
<!-- Mobile togglers -->
<div class="d-flex flex-1 d-lg-none">
...
</div>
<!-- /mobile togglers -->
<!-- Navbar brand -->
<div class="navbar-brand flex-1 flex-lg-0 text-center text-lg-left">
...
</div>
<!-- /navbar brand -->
<!-- Collapsible navbar content -->
<div class="collapse navbar-collapse order-2 order-lg-1" id="navbar-mobile">
...
</div>
<!-- /collapsible navbar content -->
<!-- Content that remains visible on mobile -->
<div class="flex-row order-1 order-lg-2 flex-1 flex-lg-0 justify-content-end align-items-center">
...
</div>
<!-- /content that remains visible on mobile -->
</div>
<!-- /main navbar -->
Small navbar
Decrease height of the navbar by adding .navbar-sm class to the main .navbar container. Small navbar height is ~47px including borders, all navbar components are adjusted to the small navbar height automatically.
Small navbar example:
Small navbar markup:
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-static navbar-expand-lg">
<!-- Mobile togglers -->
<div class="d-flex flex-1 d-lg-none">
...
</div>
<!-- /mobile togglers -->
<!-- Navbar brand -->
<div class="navbar-brand flex-1 flex-lg-0 text-center text-lg-left">
...
</div>
<!-- /navbar brand -->
<!-- Collapsible navbar content -->
<div class="collapse navbar-collapse order-2 order-lg-1" id="navbar-mobile">
...
</div>
<!-- /collapsible navbar content -->
<!-- Content that remains visible on mobile -->
<div class="flex-row order-1 order-lg-2 flex-1 flex-lg-0 justify-content-end align-items-center">
...
</div>
<!-- /content that remains visible on mobile -->
</div>
<!-- /main navbar -->
Size combinations
Multiple navbars support different heights as well, just add optional height classes to both navbars. It doesn't matter if navbars are sticky, fixed or static - no additional classes or CSS required, everything works out of the box.
Sizes of static multiple navbars:
Markup of multiple navbars:
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-static navbar-expand-lg">
<!-- Mobile togglers -->
<div class="d-flex flex-1 d-lg-none">
...
</div>
<!-- /mobile togglers -->
<!-- Navbar brand -->
<div class="navbar-brand flex-1 flex-lg-0 text-center text-lg-left">
...
</div>
<!-- /navbar brand -->
<!-- Collapsible navbar content -->
<div class="collapse navbar-collapse order-2 order-lg-1" id="navbar-mobile">
...
</div>
<!-- /collapsible navbar content -->
<!-- Content that remains visible on mobile -->
<div class="flex-row order-1 order-lg-2 flex-1 flex-lg-0 justify-content-end align-items-center">
...
</div>
<!-- /content that remains visible on mobile -->
</div>
<!-- /main navbar -->
<!-- Second navbar -->
<div class="navbar navbar-dark bg-secondary navbar-sm navbar-expand-lg">
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-second">
...
</div>
<!-- /navbar content -->
</div>
<!-- /second navbar -->
