Fixating the navbar
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...