SEPT 2012: See Updated post on <a href=”http://www.kineticpulse.co.uk/?p=427″>how to add clickable links to hear of a Squarespace site </a>

I do like Squarespace but often clients want something more than one large banner as their header. So here is my solution to add a few clickable links into the header.

Essentially the links aren’t in the header at all they are in the footer section and miraculously moved up into the header by the wonders of CSS and absolute positioning.

Step 1: Upload banner with images embedded in it eg: Social media icons

Step 2: In Website Management > Website Settings, Add the links into your footer eg:

<a id=”MMWLink” class=”headerLink” href=”http://www.yourlink1.co.uk” title=”Visit Manage My Website’s site” target=”_blank”>www.yourlink1.co.uk</a>
<a id=”MMELink” class=”headerLink” href=”http://www.yourlink2.co.uk” title=”Visit Manage My Event’s site” target=”_blank”>www.yourlink2.co.uk</a>

Step 3: Then in the Custom CSS add the following:


/*------ new styles for header links -----*/
#canvasWrapper{
position:relative;
}
.headerLink{
position:absolute;
width:133px;
height:57px;
text-indent:-9999px;
top:68px;
}

#MMWLink{
right:155px;
}

#MMELink{
right:20px;
}

Its a bit of a dark art getting the exact positions of the links to hover the a tags over, but you can usually make a good estimation by measuring the top corner positions in Photoshop or other photo app, then do the final tweaks in the CSS file. (Tip put a border:1px solid #ccc round teh links while you’re tweaking teh positions)

See it in action here: www.managemywebsite.co.uk and www.yearofthemad.net
Note: The Manage My Website header links have extra juiciness in the fact that they have a background images that changes on hover. But you can figure out how to do that yourselves – its just a few lines of extra CSS!