# Navbar

## Default navbar

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Justified navbar nav links are currently not supported.

{% highlight html %}
{% endhighlight %}

## Brand image

Replace the navbar brand with your own image by swapping the text for an `<img>`. Since the `.navbar-brand` has its own padding and height, you may need to override some CSS depending on your image.

{% highlight html %}
{% endhighlight %}

## Forms

Place form content within `.navbar-form` for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.

As a heads up, `.navbar-form` shares much of its code with `.form-inline` via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.

{% highlight html %}
{% endhighlight %}

## Buttons

Add the `.navbar-btn` class to `<button>` elements not residing in a `<form>` to vertically center them in the navbar.

{% highlight html %}
{% endhighlight %}

## Text

Wrap strings of text in an element with `.navbar-text`, usually on a `<p>` tag for proper leading and color.

{% highlight html %}
{% endhighlight %}

## Non-nav links

For folks using standard links that are not within the regular navbar navigation component, use the `.navbar-link` class to add the proper colors for the default and inverse navbar options.

{% highlight html %}
{% endhighlight %}

## Component alignment

Align nav links, forms, buttons, or text, using the `.navbar-left` or `.navbar-right` utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate `<ul>` with the respective utility class applied.

These classes are mixin-ed versions of `.pull-left` and `.pull-right`, but they're scoped to media queries for easier handling of navbar components across device sizes.

## Fixed to top

Add `.navbar-fixed-top` and include a `.container` or `.container-fluid` to center and pad navbar content.

{% highlight html %}
{% endhighlight %}

## Fixed to bottom

Add `.navbar-fixed-bottom` and include a `.container` or `.container-fluid` to center and pad navbar content.

{% highlight html %}
{% endhighlight %}

## Static top

Create a full-width navbar that scrolls away with the page by adding `.navbar-static-top` and include a `.container` or `.container-fluid` to center and pad navbar content.

Unlike the `.navbar-fixed-*` classes, you do not need to change any padding on the `body`.

{% highlight html %}
{% endhighlight %}

## Inverted navbar

Modify the look of the navbar by adding `.navbar-inverse`.

{% highlight html %}
{% endhighlight %}