I spent a lot of this last week trying to get the navigation to update with an “active” class when the page is in view.  This class allows me to style the navigation differently than the rest when it is the focus.  The next thing I spent a bit of time on was absolute positioning and centering my content.  There are times when I will need items to “stick” to one area, while other times I will need items to adjust their size and position if the user adjusts the screen size.  I was able to accomplish centering by applying the utilizing the following CSS:

.overlay-center {
    position: absolute;
    left: 50%;
}
.overlay-box {
    background-color: rgba(255,255,255,.9);
    padding: 2em;
    margin: 2em;
    border-radius: 3px;
}
#home div > .overlay-box {
    position: relative;
    left: -50%;
    max-width: 350px;
    min-width: 250px;
    margin: 10px auto;
    height: 25%;
}

To this code:

<section id="home">
   <div class="overlay-center">
     <div class="overlay-box">
       <h4>Overlay Box Heading</h4>
       <h4 class="subheading">Overlay Box Subheading</h4>
       <p>This is some body text.</p>
     </div>
   </div>
 </section>

One problem I haven’t been able to solve yet is updating the header with the “current page.”  I have the plugin set up, but I can’t make it function completely—hopefully next week!  Here’s a live version of my progress:

http://goo.gl/rbK41q