Whole Header Region Clickable

##Header Text and Image are Clickable

On the majority the sites out there, the click on the upper-left hand side where logo and text is situated, will take you to the home page. Take for example Trello or PcWorld. However, I do not have a small logo on the upper-left of the site because I want my whole header region to lead to the home page.

The general idea on how to do this is to make a header tag that will contain all header text and logo along with a link. To illustrate this, I will use my site as an example. If you want to make changes in your Octopress blog, I am modifying my source/_includes/custom/header.html file.

Header Region
1
2
3
4
5
6
7
8
<div title="Home is where the heart is." id="main-header-container">
<div id="top-header-area"></div>
<div id="main-header">
<img alt="my-main-logo" id="my-main-logo" src="{{ root_url }}/images/logoSmall.png">
<h1 id="site-title-header">{{ site.title }}</h1>
</div>
<a id="home-link" href="/"></a>
</div>

To make the link work for all browsers, which includes IE, there is an additional css trick. The A tag needs to have a background color (it does not matter which color) and set the opacity of the A tag to zero.

Absolute Position the A Tag
1
2
3
4
5
6
7
8
9
10
#home-link {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: #fff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}