Introduction

Now that we’ve created our first summary and detail pages, it makes sense for us to revisit a core component in our design -- the sitewide header navigation -- and actually make it work. We now have actual pages in our site, after all! We should be able to navigate to them using the in-site navigation element. Unfortunately, that’s not possible right now, since these links are still just the hard-coded links to nonexistent HTML pages:

With that in mind, let’s update our header to do the following:

  1. We’re going to keep the Dreamrs logo, but we’ll walk through how you might change that logo out to something else for your own theme.

  2. We’re going to make sure the Dreamrs logo always links to the home page of the site. Right now it links to index.html.

  3. We’re going to swap out the righthand navigation with a dynamic list of pages.

  4. We’re going to cache that content, so that it doesn’t have to dynamically render all the time.

Let’s go!