Light navbar

Light navbar is a basic Bootstrap navbar with white background color defined in $navbar-light-bg | --navbar-bg variables. Light navbar is the only navbar style that has light color scheme. By default, basic Bootstrap styling has only 2 color presets: light and dark. Light is the default navbar theme and doesn't require any color classes in the base .navbar container.

Light navbar example:

Light navbar markup:

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

											<!-- Navbar brand -->
											<div class="navbar-brand">
												...
											</div>
											<!-- /navbar brand -->


											<!-- Mobile toggler -->
											<div class="d-lg-none">
												...
											</div>
											<!-- /mobile toggler -->


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

										</div>
									</div>
									<!-- /light navbar -->
								
							
Dark navbar

Dark navbar is one of the default Bootstrap navbar styles with dark blue/grey background color defined in $navbar-dark-bg variable. Default BS styling requires color helper class added to .navbar-dark container. This behaviour was improved and all .bg-[color] classes are now optional, but still require .navbar-dark class for proper content styling. Some elements require minor color adjustments (link and border colors), so use utility classes to make them pixel perfect.

Dark navbar example:

Dark navbar markup:

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

											<!-- Navbar brand -->
											<div class="navbar-brand">
												...
											</div>
											<!-- /navbar brand -->


											<!-- Mobile toggler -->
											<div class="d-lg-none">
												...
											</div>
											<!-- /mobile toggler -->


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

										</div>
									</div>
									<!-- /dark navbar -->
								
							
Custom navbar color

Both light and dark navbars support custom background colors from template's color system and default BS color options. For dark colors use .bg-[color] and/or .bg-[color]-[tone] classes, for light colors use .bg-light and .bg-[color]-100 classes. All components inside navbar automatically adjust text, placeholder and background colors according to the specified color theme.

Custom light color markup:

										
											<!-- Custom light color -->
											<div class="navbar bg-primary bg-opacity-10 navbar-expand-lg">
												<div class="container-fluid">

													<!-- Navbar brand -->
													<div class="navbar-brand">
														...
													</div>
													<!-- /navbar brand -->


													<!-- Mobile toggler -->
													<div class="d-lg-none">
														...
													</div>
													<!-- /mobile toggler -->


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

												</div>
											</div>
											<!-- /custom light color -->
										
									

Custom dark color markup:

										
											<!-- Custom dark color -->
											<div class="navbar navbar-dark bg-secondary navbar-expand-lg">
												<div class="container-fluid">

													<!-- Navbar brand -->
													<div class="navbar-brand">
														...
													</div>
													<!-- /navbar brand -->


													<!-- Mobile toggler -->
													<div class="d-lg-none">
														...
													</div>
													<!-- /mobile toggler -->


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

												</div>
											</div>
											<!-- /custom dark color -->
										
									
Color combinations

Background colors in multiple navbars can be mixed: you can specify custom background colors for main and secondary navbars or make them look identical. All navbars have top and bottom borders, so in some color combinations you might need to use border utility classes to remove some borders, change border color or make them transparent (prefered for correct padding calculations in SASS).

Example of mixing dark colors:

Multiple navbars markup:

								
									<!-- First navbar -->
									<div class="navbar navbar-dark bg-teal navbar-expand-lg">
										<div class="container-fluid">

											<!-- Navbar content -->
											<div class="navbar-brand">
												...
											</div>
											<div class="d-lg-none">
												...
											</div>
											<div class="collapse navbar-collapse" id="navbar-first">
												...
											</div>
											<!-- /navbar content -->

										</div>
									</div>
									<!-- /first navbar -->


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

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

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