#### Navbars - Sizes

Statistics Invoices Schedule

##### Large navbar

Increase height of the navbar by adding `.navbar-lg` class to the main `.navbar` container. 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-top` class to the `<body>` container to set top padding and/or `.navbar-lg-bottom` class if navbar placement is bottom to set bottom padding.

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 `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 power of SASS. If navbar type is fixed, add `.navbar-top` class to the `<body>` container to set top padding and/or `.navbar-bottom` class if navbar placement is bottom to set bottom padding.

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-sm` class to the main `.navbar` container. 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-top` class to the `<body>` container to set top padding and/or `.navbar-sm-bottom` class if navbar placement is bottom to set bottom padding.

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]-top` to the `<body>` container to set top padding and/or `.navbar-[size]-[size]-bottom` class if navbar placement is bottom to set bottom padding. Example: add `.navbar-md-sm-top` class 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 -->