Navigation
Victoria Baker
 Santa Ana, CA

Navbars - Colors

Actions
View reports Edit reports Statistics
Export
Export to PDF Export to CSV
Light navbar

Light navbar is a basic Bootstrap navbar with white background color defined in $navbar-light-bg variable. 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. To use light navbar styling, add .navbar-light class to the base .navbar container, styles of all navbar components will be adjusted to the light background theme automatically.

Light navbar example:

Light navbar markup:

<!-- Light navbar -->
<div class="navbar navbar-light navbar-expand-md">

	<!-- Header -->
	<div class="navbar-header navbar-dark [...]">
		<div class="navbar-brand navbar-brand-md">
			...
		</div>
		
		<div class="navbar-brand navbar-brand-xs">
			...
		</div>
	</div>
	<!-- /header -->


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


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

</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-md">

	<!-- Header -->
	<div class="navbar-header navbar-dark [...]">
		<div class="navbar-brand navbar-brand-md">
			...
		</div>
		
		<div class="navbar-brand navbar-brand-xs">
			...
		</div>
	</div>
	<!-- /header -->


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


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

</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 .alpha-[color] classes. All components inside navbar automatically adjust text, placeholder and background colors according to the specified color theme.

Custom light color example:

Custom dark color example:

Custom light color markup:

<!-- Custom light color -->
<div class="navbar navbar-light alpha-info border-info navbar-expand-md">

	<!-- Header -->
	<div class="navbar-header navbar-dark [...]">
		<div class="navbar-brand navbar-brand-md">
			...
		</div>
		
		<div class="navbar-brand navbar-brand-xs">
			...
		</div>
	</div>
	<!-- /header -->


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


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

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

Custom dark color markup:

<!-- Custom dark color -->
<div class="navbar navbar-dark bg-blue navbar-expand-md">

	<!-- Header -->
	<div class="navbar-header navbar-dark [...]">
		<div class="navbar-brand navbar-brand-md">
			...
		</div>
		
		<div class="navbar-brand navbar-brand-xs">
			...
		</div>
	</div>
	<!-- /header -->


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


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

</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-400 navbar-expand-md">

	<!-- Navbar content -->
	<div class="navbar-header">
		...
	</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-expand-md">

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

</div>
<!-- /second navbar -->
Navbar classes
Navbar is a complex, but very flexible component. It supports different types of content, responsive utilities manage content appearance and spacing on various screen sizes, supports multiple sizing and color options etc. And everything can be changed on-the-fly directly in HTML markup. If you can't find an option you need, you can always extend default SCSS code. Table below demonstrates all available classes that can be used within the navbar:
Class Type Description
.navbar Required Default navbar class, must be used with any navbar type and color. Responsible for basic navbar and navbar components styling as a parent container.
.navbar-light Required This class is used for dark background colors - default dark color is set in $navbar-light-bg variable, feel free to adjust the color according to your needs.
.navbar-light.alpha-* Optional Combination of these classes allows you to set custom light color to the light navbar. Note - .navbar-light is required, it's responsible for correct content styling.
.navbar-dark Required This class is used for dark background colors - default dark color is set in $navbar-dark-bg variable, feel free to adjust the color according to your needs.
.navbar-dark.bg-* Optional Combination of these classes allows you to set custom dark color to the dark navbar. Note - .navbar-dark is required, it's responsible for correct content styling.
.navbar-expand-[breakpoint] Optional For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class. Otherwise use this class to change when navbar content collapses behind a button.
.navbar-header Optional Navbar brand wrapper. This class is responsible for navbar logo section with custom background color. Must contain children .navbar-brand container(s).
.navbar-brand Required Class for logo container. It can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles
.navbar-brand-[md, xs] Required These classes toggle logos - xs is hidden by default and is visible if main sidebar is collapsed, md is visible by default and is hidden when main sidebar is expanded
.navbar-toggler Required This class needs to be added to the navbar toggle button that toggles navbar content on small screens. Always used with visibility utility classes.
.navbar-collapse Required Groups and hides navbar contents by a parent breakpoint. Requires an ID for targeting collapsible container when sidebar content is collapsed.
.navbar-nav Required Responsive navigation container class that adds default styling for navbar navigation.
.nav-item Required Wrapper class for immediate parents of all navigation links. Responsible for correct styling of nav items
.navbar-nav-link Required Custom class for links within .navbar-nav list, it sets proper styling for links in light and dark navbars.
.navbar-text Required This class adjusts vertical alignment and horizontal spacing for strings of text
.navbar-component Optional Display navbar as a stand alone component, with border and rounded corners.
.fixed-top Optional Makes navbar sticked to the top of the page. Requires proper class for <body> container, see the table below.
.fixed-bottom Optional Makes navbar sticked to the bottom of the page. Requires proper class for <body> container, see the table below.
.sticky-top Optional Adds position: sticky; to the navbar - it's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed. Support is limited.
Body classes
If you want to place navbar in non-static positions, you can choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and require custom classes added to the <body> container to prevent overlap with other elements. The following table demonstrates the list of classes for <body> container if navbar has non-static position:
Class Description
.navbar-top This class adds top padding to the <body> container. Works only with default navbar height. If another height is specified, apply another class (see the line below).
.navbar-bottom This class adds bottom padding to the <body> container. Works only with default navbar height. If another height is specified, apply another class (see the line below).
.navbar-top-[size] Controls top spacing of <body> container, if navbar has optional height. Available sizes: small (*-sm) and large (*-lg). Default navbar requires .navbar-top class only.
.navbar-bottom-[size] Controls bottom spacing of <body> container, if navbar has optional height. Available sizes: small (*-sm) and large (*-lg). Default navbar requires .navbar-bottom class only.
.navbar-top-[size]-[size] Use these classes if the layout has multiple top navbars, where first [size] is the size of the first navbar, second [size] - height of the second navbar. In this particular use case, [size] can be: lg if large height, md is default height sm is small height.
.navbar-bottom-[size]-[size] Use these classes if the layout has multiple bottom navbars, where first [size] is the size of the first navbar, second [size] - height of the second navbar. In this particular use case, [size] can be: lg if large height, md is default height sm is small height.