Large navbar
Increase height of the navbar by adding .navbar-lgclass to the main .navbarcontainer. Large navbar height is ~54px including borders, all navbar components are adjusted to the large navbar height automatically. If navbar type is fixed, add .navbar-lg-topclass to the <body>container to set toppadding and/or .navbar-lg-bottomclass if navbar placement is bottom to set bottompadding.
Large navbar example:
Large static navbar markup:
<!-- Document body --><body> <!-- Large static navbar --> <div class="navbar navbar-dark navbar-lg navbar-expand-md"> <!-- Brand and toggler --> <div class="navbar-brand">...</div> <div class="d-md-none">...</div> <!-- /brand and toggler --> <!-- Navbar content --> <div class="collapse navbar-collapse" id="navbar-main"> ... </div> <!-- /navbar content --> </div> <!-- /large static navbar --></body><!-- /document body -->Large fixed navbar markup:
<!-- Document body --><body class="navbar-lg-top"> <!-- Large fixed navbar --> <div class="navbar navbar-dark navbar-lg navbar-expand-md fixed-top"> <!-- Brand and toggler --> <div class="navbar-brand">...</div> <div class="d-md-none">...</div> <!-- /brand and toggler --> <!-- Navbar content --> <div class="collapse navbar-collapse" id="navbar-main"> ... </div> <!-- /navbar content --> </div> <!-- /large fixed navbar --></body><!-- /document body -->Default navbar
Default navbar height is ~50px including borders. Navbar container doesn't have any heightproperties in CSS, so if you change vertical padding of navbar navigation items or brand height, computed navbar height will be adjusted automatically thanks to power of SASS. If navbar type is fixed, add .navbar-topclass to the <body>container to set toppadding and/or .navbar-bottomclass if navbar placement is bottom to set bottompadding.
Default navbar example:
Default static navbar markup:
<!-- Document body --><body> <!-- Default static navbar --> <div class="navbar navbar-dark navbar-expand-md"> <!-- Brand and toggler --> <div class="navbar-brand">...</div> <div class="d-md-none">...</div> <!-- /brand and toggler --> <!-- Navbar content --> <div class="collapse navbar-collapse" id="navbar-main"> ... </div> <!-- /navbar content --> </div> <!-- /default static navbar --></body><!-- /document body -->Default fixed navbar markup:
<!-- Document body --><body class="navbar-top"> <!-- Default fixed navbar --> <div class="navbar navbar-dark navbar-expand-md fixed-top"> <!-- Brand and toggler --> <div class="navbar-brand">...</div> <div class="d-md-none">...</div> <!-- /brand and toggler --> <!-- Navbar content --> <div class="collapse navbar-collapse" id="navbar-main"> ... </div> <!-- /navbar content --> </div> <!-- /default fixed navbar --></body><!-- /document body -->Small navbar
Decrease height of the navbar by adding .navbar-smclass to the main .navbarcontainer. Small navbar height is ~46px including borders, all navbar components are adjusted to the large navbar height automatically. If navbar type is fixed, add .navbar-sm-topclass to the <body>container to set toppadding and/or .navbar-sm-bottomclass if navbar placement is bottom to set bottompadding.
Small navbar example:
Small static navbar markup:
<!-- Document body --><body> <!-- Small static navbar --> <div class="navbar navbar-dark navbar-sm navbar-expand-md"> <!-- Brand and toggler --> <div class="navbar-brand">...</div> <div class="d-md-none">...</div> <!-- /brand and toggler --> <!-- Navbar content --> <div class="collapse navbar-collapse" id="navbar-main"> ... </div> <!-- /navbar content --> </div> <!-- /small static navbar --></body><!-- /document body -->Small fixed navbar markup:
<!-- Document body --><body class="navbar-sm-top"> <!-- Small fixed navbar --> <div class="navbar navbar-dark navbar-sm navbar-expand-md fixed-top"> <!-- Brand and toggler --> <div class="navbar-brand">...</div> <div class="d-md-none">...</div> <!-- /brand and toggler --> <!-- Navbar content --> <div class="collapse navbar-collapse" id="navbar-main"> ... </div> <!-- /navbar content --> </div> <!-- /small fixed navbar --></body><!-- /document body -->Size combinations
Multiple navbars support different heights as well, just add optional height classes to both navbars. If navbar type is fixed, add .navbar-[size]-[size]-topto the <body>container to set toppadding and/or .navbar-[size]-[size]-bottomclass if navbar placement is bottom to set bottompadding. Example: add .navbar-md-sm-topclass to <body>if first navbar has default height and second has small.
Sizes of static multiple navbars:
Markup of static multiple navbars:
<!-- Document body --><body> <!-- First navbar --> <div class="navbar navbar-dark bg-teal-400 navbar-expand-md"> <!-- Navbar content --> <div class="navbar-brand"> ... </div> <div class="d-md-none"> ... </div> <div class="collapse navbar-collapse" id="navbar-first"> ... </div> <!-- /navbar content --> </div> <!-- /first navbar --> <!-- Second navbar --> <div class="navbar navbar-dark bg-slate-700 navbar-sm navbar-expand-md"> <!-- Navbar content --> <div class="navbar-brand"> ... </div> <div class="d-md-none"> ... </div> <div class="collapse navbar-collapse" id="navbar-second"> ... </div> <!-- /navbar content --> </div> <!-- /second navbar --></body><!-- /document body -->Markup of fixed multiple navbars:
<!-- Document body --><body class="navbar-md-sm-top"> <!-- First navbar --> <div class="navbar navbar-dark bg-teal-400 navbar-expand-md"> <!-- Navbar content --> <div class="navbar-brand"> ... </div> <div class="d-md-none"> ... </div> <div class="collapse navbar-collapse" id="navbar-first"> ... </div> <!-- /navbar content --> </div> <!-- /first navbar --> <!-- Second navbar --> <div class="navbar navbar-dark bg-slate-700 navbar-sm navbar-expand-md"> <!-- Navbar content --> <div class="navbar-brand"> ... </div> <div class="d-md-none"> ... </div> <div class="collapse navbar-collapse" id="navbar-second"> ... </div> <!-- /navbar content --> </div> <!-- /second navbar --></body><!-- /document body -->