Adding clickable links into Squarespace banner – UPDATE

In my previous post I explained how you can add links to the banner section of your Squarespace site by adding links to the footer and using some clever CSS to shift them up the header.

If you have an Unlimited Plan with Squarespace you have access to more Code Injection options

This means you can add the code to the “right” place – in the site header.
For example, you can add the following to the Site Banner HTML Override

And this to the Custom CSS:

#bannerAreaWrapper{
position:relative;
}

.headerLink{
position:absolute;
width:48px;
height:49px;
top:24px;
}

a#twitLink{
right:86px
}
a#fbLink{
right:30px
}
a#preorderLink{
top:156px;
right:300px
}

And as long as you have uploaded correctly sliced n diced images for these links to reference, Bob should be your Uncle.
See the Daisy Chapman site in action here