title: Foundation 6 - Use CSS to arrange Header image and Nav properly
body: <p>I am using Foundation 6 to try to create <strong>a header image which overlaps part of a navigation bar</strong>. It uses the <code>.row</code> class as a responsive div.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header class="row text-center"&gt;
    &lt;a href="//google.com"&gt;
      &lt;img src="path/to/horizontal banner image"&gt;
    &lt;/a&gt;
   &lt;/header&gt;
  
  &lt;nav&gt;
    &lt;div class="row text-center"&gt;
      &lt;a href="//yahoo.com"&gt;Text here&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>header{
    background-color: lightgreen;
  }
  
  nav{
    margin-top: -5%;
    font-size: 150%;
    background-color: lightblue;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hvmt2j1j/" rel="nofollow">http://jsfiddle.net/hvmt2j1j/</a></p>
  
  <p>As illustrated in the above fiddle, I have an image and a nav bar that includes links. The image itself is a link too.</p>
  
  <p>However I found out that:</p>
  
  <ul>
  <li>when the screen size is large, the text goes upward and does not not
  align with the image properly anymore.</li>
  <li>In some browsers the image link overlaps the nav bar link. I would like to restrict the clickable area of the image to the green area only.</li>
  </ul>
  
  <p>I am quite new to this, therefore I believe there is probably a better way to structure the <code>&lt;div&gt;</code> tags or CSS to achieve this. Thank you very much.</p>