Navbars - Colors
Default navbar is a basic Bootstrap navbar with light grey background color. Default navbar is the only navbar style that has light color scheme. By default, basic Bootstrap styling has only 2 color presets: default and inverse. To use default navbar styling, add .navbar-default class to the base .navbar class, all navbar components styles will adjusted to the light background theme automatically.
Example navbar
Example markup
<!-- Default navbar -->
<div class="navbar navbar-default">
<!-- Navbar header -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="assets/images/logo_dark.png" alt="">
</a>
</div>
<!-- /navbar header -->
<!-- Left nav -->
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
</ul>
<!-- /left nav -->
<!-- Right nav -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
<!-- /right nav -->
</div>
<!-- /default navbar -->
Inversed navbar is a basic Bootstrap navbar with dark blue/grey background color. Basically, inversed navbar color can be added using custom color system, so styles for .navbar-inverse is added to the template just to overwrite default Bootstrap styling for inversed navbar, which has darker color, to match general layout. Feel free to use both these methods.
Example navbar
Example markup
<!-- Inversed navbar -->
<div class="navbar navbar-inverse">
<!-- Navbar header -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="assets/images/logo_light.png" alt="">
</a>
</div>
<!-- /navbar header -->
<!-- Left nav -->
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
</ul>
<!-- /left nav -->
<!-- Right nav -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
<!-- /right nav -->
</div>
<!-- /inversed navbar -->
Add custom colors to the navbar and navbar components using custom color system. Custom color system allows you to use additional colors from palettes for navbar components or navbar in general. All components inside navbar are automatically adjust text, placeholder and background colors according to the specified color class.
Example navbar
Example markup
<!-- Colored navbar -->
<div class="navbar bg-primary">
<!-- Navbar header -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="assets/images/logo_light.png" alt="">
</a>
</div>
<!-- /navbar header -->
<!-- Left nav -->
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
</ul>
<!-- /left nav -->
<!-- Right nav -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
<!-- /right nav -->
</div>
<!-- /colored navbar -->
Color schemes in multiple navbars can be mixed: you can specify custom background colors for main and secondary navbars or make them identical. All navbars have bottom borders, so if both navbars have the same background color, they will have a visual separation. All these mixes support different sizing and components as well.
Example navbars
Example markup
<!-- Main navbar -->
<div class="navbar navbar-inverse bg-teal">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /main navbar -->
<!-- Secondary navbar -->
<div class="navbar navbar-inverse bg-brown navbar-xs">
<div class="navbar-header">...</div>
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<!-- /secondary navbar -->