Remove overflowing clickable area - html

Question

I have a navbar with a certain height and a logo that overflows. This logo is, of course, clickable, but it means that the part that overflows, is also clickable.
Is it possible to make the logo overflow, but not the clickable area?
HTML
<nav>
<a href="#">
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</a>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
JSFIDDLE

Answer 1

Something like this?
body,
html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
a {
display: inline-block;
height: 100%;
width: 100%;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
pointer-events: none;
}
<nav>
<a href="#">
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</a>
</nav>

Answer 2

Just move logo outside of your link and put that link on rest of header:
body,
html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
display: inline-block;
}
<nav>
<a href="#">
</a>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>

Answer 3

Change little bit of you structure.
Put <a> independent and pass link in it with following css.
HTML
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
nav a{
position: relative;
display: block;
height: 100%;
z-index: 1;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
Example : https://jsfiddle.net/67s4ajqf/3/

Answer 4

Don't place the whole div inside the a.
Place the link after the image, give it absolute positioning and carefully set the position and size.
The other answers make the whole header clickable. If it is not desired, use this solution. You may have to adjust the width of the clickable area.
See the example below:
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}
a.clickable-logo {
position: absolute;
display: inline-block;
left: 36px;
top: 36px;
width: 600px;
height: 100px;
}
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
<a href="#" class="clickable-logo">
</a>
</div>
</nav>

Answer 5

What about something like this?
HTML
<a href="#">
<div class="clear">
</div>
</a>
<nav>
<div class="logo">
<img src="http://i.imgur.com/h4bUdrZ.png" />
</div>
</nav>
CSS
body, html {
padding: 0;
margin: 0;
}
nav {
height: 100px;
background: blue;
position: relative;
}
.clear {
height: 100px;
background: 0;
position: absolute;
width: 100%;
z-index: 2;
}
.logo {
position: absolute;
top: -36px;
left: -39px;
}