Foundation 6 - Use CSS to arrange Header image and Nav properly - html

Question

I am using Foundation 6 to try to create a header image which overlaps part of a navigation bar. It uses the .row class as a responsive div.
HTML
<header class="row text-center">
<a href="//google.com">
<img src="path/to/horizontal banner image">
</a>
</header>
<nav>
<div class="row text-center">
Text here
</div>
</nav>
CSS
header{
background-color: lightgreen;
}
nav{
margin-top: -5%;
font-size: 150%;
background-color: lightblue;
}
http://jsfiddle.net/hvmt2j1j/
As illustrated in the above fiddle, I have an image and a nav bar that includes links. The image itself is a link too.
However I found out that:
when the screen size is large, the text goes upward and does not not
align with the image properly anymore.
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.
I am quite new to this, therefore I believe there is probably a better way to structure the <div> tags or CSS to achieve this. Thank you very much.

Answer 1

My proposition:
body {
margin: 0;
}
header {
background-color: #6C6;
background-image: url("http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/banner_white.png"), url("https://i.imgur.com/TILTsNC.png");
background-repeat: no-repeat, repeat-x;
background-position: top center, bottom;
height: 189px;
max-width: 100%;
width: 550px;
}
.green {
display: block;
height: 80%;
}
.blue {
display: block;
font-size: 2em;
height: 20%;
text-align: center;
text-decoration: none;
}
<header>
<a class="green" href="https://www.google.com/"></a>
<a class="blue" href="https://www.yahoo.com/">Text here</a>
</header>
You define a header with just two <a> elements that you treat as block (flow in HTML5) content, meaning they will behave just like divs, but will be clickable of course, because they are still links after all. To do so, you got to give them display: block style. Then you need to stack two backgrounds for <header>. First one is your picture and the second one is lightblue color with width of 1px and height of desired blue area height (in this case 20% of 189px). More info on Using CSS multiple backgrounds (MDN).