#### Navbars - Multiple

Statistics Invoices Schedule

###### Top and bottom navbars

This page demonstrates both top and bottom fixed navbars. Bottom navbar is always sticked to the bottom of the window.

##### Multiple navbars

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>

##### Navbar classes

Navbar is a complex and very flexible component, which allows you to control appearance of different types of content, components placement, sizes, colors etc. All this functionality is available by setting proper classes to the navbar components and navbar itself. Table below demonstrates all available classes that can be used with the navbar:

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.

##### Body classes

Bottom navbar is available only as a `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.