Large navbar

Increase size of the navbar navigation by adding .navbar-lg class to the main .navbar container. Large navbar height is ~66px, almost all navbar components are adjusted to the large navbar height automatically, some use cases may require minor adjustments. You can also use padding utility classes to change inner spacing.

Large navbar markup:

								
									<!-- Main navbar -->
									<div class="navbar navbar-lg navbar-dark navbar-expand-lg">
										<div class="container-fluid">

											<!-- Mobile togglers -->
											<div class="d-flex d-lg-none me-2">
												...
											</div>
											<!-- /mobile togglers -->


											<!-- Navbar brand -->
											<div class="d-inline-flex flex-1 flex-lg-0">
												<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
													...
												</a>
											</div>
											<!-- /navbar brand -->


											<!-- Left content -->
											<div class="flex-row">
												...
											</div>
											<!-- /left content -->


											<!-- Collapsible navbar content (center) -->
											<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
												...
											</div>
											<!-- /collapsible navbar content (center) -->


											<!-- Right content -->
											<div class="flex-row justify-content-end order-1 order-lg-2">
												...
											</div>
											<!-- /right content -->

										</div>
									</div>
									<!-- /main navbar -->
								
							
Default navbar

Default navbar height is ~62px. 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. All sizes can be also changed in CSS variables without build process, primary containers that control navbar height are .navbar and .nav

Default navbar markup:

								
									<!-- Main navbar -->
									<div class="navbar navbar-dark navbar-expand-lg">
										<div class="container-fluid">

											<!-- Mobile togglers -->
											<div class="d-flex d-lg-none me-2">
												...
											</div>
											<!-- /mobile togglers -->


											<!-- Navbar brand -->
											<div class="d-inline-flex flex-1 flex-lg-0">
												<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
													...
												</a>
											</div>
											<!-- /navbar brand -->


											<!-- Left content -->
											<div class="flex-row">
												...
											</div>
											<!-- /left content -->


											<!-- Collapsible navbar content (center) -->
											<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
												...
											</div>
											<!-- /collapsible navbar content (center) -->


											<!-- Right content -->
											<div class="flex-row justify-content-end order-1 order-lg-2">
												...
											</div>
											<!-- /right content -->

										</div>
									</div>
									<!-- /main navbar -->
								
							
Small navbar

Decrease size of the navbar navigation by adding .navbar-sm class to the main .navbar container. Small navbar height is ~58px, almost all navbar components are adjusted to the small navbar height automatically, some use cases may require minor adjustments. You can also use padding utility classes to change inner spacing.

Small navbar markup:

								
									<!-- Main navbar -->
									<div class="navbar navbar-sm navbar-dark navbar-expand-lg">
										<div class="container-fluid">

											<!-- Mobile togglers -->
											<div class="d-flex d-lg-none me-2">
												...
											</div>
											<!-- /mobile togglers -->


											<!-- Navbar brand -->
											<div class="d-inline-flex flex-1 flex-lg-0">
												<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
													...
												</a>
											</div>
											<!-- /navbar brand -->


											<!-- Left content -->
											<div class="flex-row">
												...
											</div>
											<!-- /left content -->


											<!-- Collapsible navbar content (center) -->
											<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
												...
											</div>
											<!-- /collapsible navbar content (center) -->


											<!-- Right content -->
											<div class="flex-row justify-content-end order-1 order-lg-2">
												...
											</div>
											<!-- /right content -->

										</div>
									</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.

Markup of multiple navbars:

								
									<!-- Main navbar -->
									<div class="navbar navbar-dark navbar-expand-lg">
										<div class="container-fluid">

											<!-- Mobile togglers -->
											<div class="d-flex d-lg-none me-2">
												...
											</div>
											<!-- /mobile togglers -->


											<!-- Navbar brand -->
											<div class="d-inline-flex flex-1 flex-lg-0">
												<a href="index.html" class="navbar-brand d-inline-flex align-items-center">
													...
												</a>
											</div>
											<!-- /navbar brand -->


											<!-- Left content -->
											<div class="flex-row">
												...
											</div>
											<!-- /left content -->


											<!-- Collapsible navbar content (center) -->
											<div class="navbar-collapse justify-content-center flex-lg-1 order-2 order-lg-1 collapse" id="navbar-mobile">
												...
											</div>
											<!-- /collapsible navbar content (center) -->


											<!-- Right content -->
											<div class="flex-row justify-content-end order-1 order-lg-2">
												...
											</div>
											<!-- /right content -->

										</div>
									</div>
									<!-- /main navbar -->


									<!-- Second navbar -->
									<div class="navbar navbar-sm navbar-expand-lg">

										<!-- Navbar content -->
										<div class="collapse navbar-collapse" id="navbar-second">
											...
										</div>
										<!-- /navbar content -->

									</div>
									<!-- /second navbar -->
								
							
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless