Adding Navbars - Exercise

Contact Us or call 1-877-932-8228
Adding Navbars - Exercise

Adding Navbars

Duration: 10 to 15 minutes.

In this exercise, you will add navbars to pages for the Nan & Bob's Online site.

  1. Open WidgetsUI/Exercises/toolbars.html in a file editor.
  2. Add a navbar to the header of the #home page with links to "Home", "Books", and "Eats"; add appropriate icons to the top of each link.
  3. Add a navbar to the footer of each interior ("Books", "Eats") page; do not add icons to these navbars.
  4. Test your work in a mobile browser; the results should look like this: Navbar exercise



Code Explanation:

We add a navbar to the header of the "Home" page, with appropriate data-icon values to show an icon at the top of each link. We use class="ui-btn-active" to make the "Home" link active for this page.

Each of the non-home pages gets a navbar in its footer, with class="ui-btn-active" again used to make the relevant link active for each page.