Our website already looks pretty decent. We have a navigation bar in place, a footer placeholder, and various sections populated with some sample content. But we are not quite there yet. The website's overall user experience is still a bit edgy, and does not yet feel very refined. Take user navigation, for instance. While clicking on a navbar link, indeed does take the user to the correct section, the navbar disappears once we navigate across the sections. This means that the navbar loses its purpose. It no longer facilitates easy navigation across the different sections of our website. Instead, the user will need to scroll to the top of the page every time they wish to use the navbar. To make the navbar persistent, append navbar-fixed-top to the class attribute of our nav element:

    <nav 
class="navbar navbar-myphoto navbar-fixed-top">
    ...
    </nav>

Save, refresh, and scroll. Voila! Our navbar now remains fixed at the top of our page. The navbar-fixed-top works as follows:

In addition to some minor margin and padding changes, navbar - fixed - top also changes the element's z - index to 1,030, therefore ensuring that the element will appear above all other elements on the page (that is, all elements that have a z - index of less than 1,030).

Should you desire to fixate the navbar at the bottom of the page, you can use the navbar-fixed-bottom class. This class behaves in exactly the same way as the navbar-fixed-top class, except that, instead of setting the element's top to 0, it sets the bottom property to 0, thereby ensuring that the element resides at the bottom of the page.

If we wanted to quickly change the color of the navbar without wanting to write a whole bunch of custom rules, then we could apply the navbar-* and bg-* classes:

Take a look at the following screenshot:

Figure 4.1: The MyPhoto navbar with three different context styles: pg-primary, bg-warning, and bg-danger.