INTRODUCING THE NAVBAR

INTRODUCING THE NAVBAR

One of the most challenging aspects of creating web apps is the fact that you're creating an application that an extremely large number of users will access, but you won't be providing them with a user manual. As a result, it's key to ensure your site is intuitive and easy to use. One great way to ensure that is to have a consistent structure throughout your site, and use conventions, such as having site navigation at the top of your site. This is where the navbar comes into play. The navbar is a Bootstrap component and is designed to provide navigation for the user. It's most commonly placed at the top of a page.

CREATING AND CONFIGURING THE NAVBAR

Getting started with the navbar

To start creating your own navbar, add an HTML5 nav element to your page, and add the navbar class to it. Alternatively, you could use a div or span element, however, best practice is to add the role='navigation'element for accessibility.

Next, adding the navbar-default class will enable the default color scheme for navbars; navbar-inverse will use the reverse color scheme.

Finally, content, like content for your page, is placed into one of two containers: container, for a fixed-widthcontainer, or container-fluid, which will take up the entire width of the page.

-- code

Positioning the navbar

You have three options when placing the navbar on your page.

The first option is to have it appear at the top of the page as a normal element, scrolling, and disappearing off the top of the browser window, along with the rest of the content. This is achieved by adding the navbar-static-top class.

-- code

The second option is affix it to the top of the page, so it will not disappear when the user scrolls, but rather stay in place. This is achieved by adding the navbar-fixed-top class.

Finally, you can have the navbar use the same behavior on the bottom of the page with navbar-fixed-bottom.

If you are using either fixed option, you are required to add padding to the top (for navbar-fixed-top), or bottom (for navbar-fixed-bottom) to the body element. If you forget to add this in, the navbar will overlap the content on the page. If you see the sample above, you'll notice the navbar is above the content, and the content starts with "Lorem ipsum dolor sit amet..." The image below shows the result of adding fixed, but not adding in the padding.

The proper HTML and CSS for a navbar-fixed-top is displayed below, with the padding. Remember that the padding must be set after the Bootstrap.min.css file is applied if you are using a seperate external stylesheet.

-- code