title: How to use php to show hover/selected class on pages when the Nav bar (not created with a ul) is in a separate include file?
body: <p>I have a php template set up where the top and bottom common information is in separate include files. How do I make it so that the hovered a class shows up on each page when it's the current page? (The effect for each nav bar element is different- it's a small icon to the left of the words.)
  Thanks!</p>
  
  <p>See code below:</p>
  
  <pre><code>&lt;nav&gt;
           &lt;div class="page"&gt;
            &lt;a href="themes.php" class="themes"&gt;Themes&lt;/a&gt;
              &lt;a href="custom-gifts.php" class="custom-gifts"&gt;Custom Gifts&lt;/a&gt;
              &lt;a href="about-us.php" class="about-us"&gt;About Us&lt;/a&gt;
              &lt;a href="testimonials.php" class="testimonials"&gt;Testimonials&lt;/a&gt;
              &lt;a href="contact-us.php" class="contact-us"&gt;Contact Us&lt;/a&gt;
           &lt;/div&gt;
           &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>nav {top:0px; text-align:right; margin:0px auto;}
  nav a {margin: 12px 10px 10px 20px;}
  a.themes {
      padding: 0px 0px 0px 24px;
      background: url(../images/themes-sprint.png) no-repeat left 0px;
      height:23px;
  }
  a.themes:hover { background-position: left -23px; }
  
  
  a.custom-gifts {
      padding: 0px 0px 0px 30px;
      background: url(../images/custom-gifts-sprint.png) no-repeat left 0px;
  }
  a.custom-gifts:hover { background-position: left -22px; }
  
  a.about-us {
      padding: 0px 0px 0px 30px;
      background: url(../images/about-us-sprint.png) no-repeat left 0px;
  }
  a.about-us:hover { background-position: left -22px; }
  
  a.testimonials {
      padding: 0px 0px 0px 30px;
      background: url(../images/testimonials-sprint.png) no-repeat left 0px;
  }
  a.testimonials:hover { background-position: left -22px; }
  
  a.contact-us {
      padding: 0px 0px 0px 30px;
      background: url(../images/contact-us-sprint.png) no-repeat left 0px;
  }
  a.contact-us:hover { background-position: left -22px; }
  </code></pre>
  
  <p>(The reason the nav bar is set up without lists and with separate sprint images is because I've designed the site to be responsive, and in the mobile version the navigation pieces appear one atop the other instead of next to each other.)</p>