Example of multiple navbars, mostly used in horizontal navigation layout. This kind of navbar group supports both static and fixed positions. Also fixed position is available for 2 navbars (both are sticked) and for the first (only first is sticked). If you need to stick only secondary navbar when it becomes fixed only after scroll to its position, the best way to achieve this effect is by using affix component.
Multiple navbars example
1. Multiple static navbars
Default navbar position is static - always stays on top and not visible on page scroll. Since this is a default navbar position, the markup doesn't require any additional classes except Bootstrap defaults. Navbars come one after another as 2 different components, they don't depend on each other. But on small screens second navbar is hidden and is accessible through main navbar.
Example markup:
<!-- Main navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-header">...</div>
<div class="navbar-collapse collapse" id="navbar-first">
<ul class="nav navbar-nav">...</ul>
</div>
</div>
<!-- /main navbar -->
<!-- Secondary navbar -->
<div class="navbar-collapse collapse" id="navbar-second">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">...</ul>
</div>
</div>
<!-- /secondary navbar -->
2. Top fixed navbars
Both navbars can be sticked to top or bottom. As well as one of them - main only or secondary only. Example markup below demonstrates 2 navbars with different height sticked to the top: body.navbar-top-sm-xs class means fixed navbar group with small main navbar and mini secondary navbar. Class .navbar-fixed-top means navbars position is top of the page. Classes .navbar-sm and navbar-xs for both navbars mean main navbar is small, secondary navbar is mini.
Example markup:
<body class="navbar-top-sm-xs">
<!-- Top navbars position -->
<div class="navbar-fixed-top">
<!-- Main mini navbar -->
<div class="navbar navbar-inverse navbar-sm">
<div class="navbar-header">...</div>
<div class="navbar-collapse collapse" id="navbar-first">
<ul class="nav navbar-nav">...</ul>
</div>
</div>
<!-- /main navbar -->
<!-- Secondary navbar -->
<div class="navbar-collapse collapse" id="navbar-second">
<div class="navbar navbar-default navbar-xs">
<ul class="nav navbar-nav">...</ul>
</div>
</div>
<!-- /secondary mini navbar -->
</div>
<!-- /top navbars position -->
</body>3. Bottom fixed navbars
Also navbars support fixed bottom position: just add necessary classes to the <body> and navbar (or navbar group) elements to control positions. Example below demonstrates 2 navbars sticked to the bottom: body.navbar-bottom-md-md class means fixed navbar group with 2 default navbars. Class .navbar-fixed-bottom means navbars position is bottom of the page. If navbars height is default, they don't require any sizing-related classes.
Example markup:
<body class="navbar-bottom-md-md">
<!-- Bottom navbars position -->
<div class="navbar-fixed-bottom">
<!-- Main default navbar -->
<div class="navbar navbar-inverse">
<div class="navbar-header">...</div>
<div class="navbar-collapse collapse" id="navbar-first">
<ul class="nav navbar-nav">...</ul>
</div>
</div>
<!-- /main navbar -->
<!-- Secondary navbar -->
<div class="navbar-collapse collapse" id="navbar-second">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">...</ul>
</div>
</div>
<!-- /secondary navbar -->
</div>
<!-- /bottom navbars position -->
</body>| Class | Description |
|---|---|
.navbar |
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-fixed-top |
Makes navbar sticked to the top of the page. Requires proper class for <body> tag, see the table below. |
.navbar-fixed-bottom |
Makes navbar sticked to the bottom of the page. Requires proper class for <body> tag, see the table below. |
.navbar-static-top |
Full-width navbar that scrolls away with the page. Unlike the .navbar-fixed-* classes, no need to add any extra class on the body for padding correction. |
.navbar-default.navbar-inverse |
Default color options for navbar provided by Bootstrap styles: default - white navbar, inverse - dark grey navbar. |
.navbar-default-secondary |
If you have 2 light navbars, use this class to darken one of them. Based on default navbar background color. |
.navbar-inverse.bg-* |
Optional background colors for navbar. Just add one of available color classes to apply custom color scheme. |
.navbar-component |
Display navbar as a stand alone component, with border and rounded corners. |
fixed component, always sticked to the bottom of the page. All dropdown menus are automatically changed to dropups in this type of navbar. The fixed navbar will overlay your other content, unless you add necessary to the top of the <body>. Depending on the fixed navbar position and size, add one of the classes specified in the following table. By default, the navbar is 46px high.
| Class | Description |
|---|---|
.navbar-top.navbar-bottom |
This class adds necessary top or bottom padding to the <body> tag. Works only with default navbar height. If another height is specified, apply another class, see the line below. |
.navbar-top-*.navbar-bottom-* |
Controls padding for different navbar heights, for both positions. Available classes: mini (*-xs), small (*-sm) and large (*-lg). Default navbar requires .navbar-top(bottom)-fixed class. |
.navbar-top-*-*.navbar-bottom-*-* |
This type of classes is used only with multiple navbars. This is the only class, where *-md suffix is available. For example class .navbar-top-md-xs means main navbar has default height (.*-md-*), secondary navbar - mini height (.*-xs). It calculates both navbars height and adds top or bottom padding with the same value. |