#### Limitless - Navbars

##### Navbars overview

Navbar is a navigation component, usually displayed on top of the page and includes brand logo, navigation and other components. By default, navbar has top `static` position. Navbar placement can be top and bottom, types can be `static`, `fixed` and `sticky`. Navbar available in 3 different sizes - large, default and small. All navbar components automatically adjust their height to match chosen navbar height.

Since navbars are available in 3 different sizes, it's required to specify proper class in `<body>` tag to set correct padding. If single navbar is sticked to the bottom of the page, correct body classes will be `.navbar-bottom` for default height and `.navbar-bottom-*` for given size - large (*-lg) and small (*-sm).

Table below describes all navbar types and combinations available:

Option | Description
--- | ---
Type
Single navbar | Single navbar. Collapsible navbar, always displayed full width without spacings (except navbar component) and on top by default. Supports different navbar components and usually appears as a main navbar with branding info, user info and navigation.
Multiple navbars | Multiple navbars have additional display options. They can be placed one after another, mixed with page header content and main content. Second sidebar is usually used as a separate component with main navigation (in horizontal navigation layout) and alternative content.
Navbar component | Displayed as a stand-alone component: includes spacings, borders and rounded corners. Can be placed anywhere - content area, footer, header or used as a main navbar. Supports all available navbar components.
Positioning
Top single | Single top navbar, usually a main navigation toolbar.
Top multiple | Double top navbar. Can be both static or fixed, check navbar related pages.
Bottom single | Single bottom navbar, usually a main navigation toolbar.
Bottom multiple | Double bottom navbar. Can be both static or fixed, check navbar related pages.
Variations
Static | Default option. Means navbar is scrolled out along with content.
Fixed | Always sticked to the page top and always visible.
Hideable | Hide navbar on scroll down and display on scroll up. Animated by default and supports both top and bottom placement.
Styling
Light | Light background with adapted components: navigation, links etc. Requires `.navbar-light` class added to the `<navbar>` container.
Dark | Dark background with adapted components: navigation, links etc. Requires `.navbar-dark` class added to the `<navbar>` container.
Custom color | Custom background color. Requires `.navbar-dark` class and `.bg-*` color class added to the `<navbar>` container.

##### Navbar markup

Navbar markup is identical in all layout variations and matches default Bootstrap's markup. The only difference is navbar placement and type. Navbar component uses flexbox model, this means all components are vertically centered by default. Below you'll find markup examples of different variations of navbar component.

###### Static navbar

By default, top and bottom navbars have static position and scroll away along with content. This use case doesn't require any additional classes for `.navbar` and `<body>` containers, this means navbar appearance depends on its placement: in the template top static navbar is the first direct child of `<body>` and placed before `.page-content` container, bottom static navbar is placed after it.

    <!-- Document body -->
    <body>

    	<!-- Main navbar -->
    	<div class="navbar navbar-dark navbar-expand-md">

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

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

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

    	</div>
    	<!-- /main navbar -->

    </body>
    <!-- /document body -->

###### Top fixed navbar

Top fixed navbar markup is similar to static, the only difference is it requires `.fixed-top` class added to the `<navbar>` container and proper body class to add top padding:

    <!-- Document body -->
    <body class="navbar-top">

    	<!-- Main navbar -->
    	<div class="navbar navbar-dark navbar-expand-md fixed-top">

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

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

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

    	</div>
    	<!-- /main navbar -->

    </body>
    <!-- /document body -->

###### Bottom fixed navbar

Bottom fixed navbar markup is similar to static and top fixed, the only difference is it requires `.fixed-bottom` class added to the `<navbar>` container and proper body class to add bottom padding:

    <!-- Document body -->
    <body class="navbar-bottom">

    	<!-- Main navbar -->
    	<div class="navbar navbar-dark navbar-expand-md fixed-bottom">

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

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

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

    	</div>
    	<!-- /main navbar -->

    </body>
    <!-- /document body -->

###### Collapsed navbar

There is one additional option, when navbar doesn't have a logo and used as a toolbar. In this case the whole navbar becomes a link on mobiles and tables, all navbar content opens on click. Supports all options stated above:

    <!-- Document body -->
    <body>

    	<!-- Footer -->
    	<div class="navbar navbar-expand-lg navbar-light">
    		<div class="text-center d-lg-none w-100">
    			<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
    				<i class="icon-unfold mr-2"></i>
    				Footer
    			</button>
    		</div>

    		<div class="navbar-collapse collapse" id="navbar-footer">
    			...
    		</div>
    	</div>
    	<!-- /footer -->

    </body>
    <!-- /document body -->

##### 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.