Kinetic Pulse
  • Home
  • Services
  • Portfolio
  • Blog
  • Terms
  • Contact

Add clickable links to header of Squarespace site

February 4, 2011

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!

Share

Facebook Google+ Twitter Pinterest Email

Back to Blog

Testimonials

Thanks so much for all your work on this, really appreciated. It’s come on in leaps and bounds since you took over.
Pete KewRedwood Strip Curtains
Thank you for all of your hard work its looks fab and I am over the moon with it!
Amanda MercerAmanda Mercer Ceramics
It’s been fab working with you – we love the site and certainly going to recommend you!
James DaviesThirty Eight Degrees North
Amazing and brilliant, Kinetic Pulse have lifted a dream to reality, Highly recommended and great if you are total novice, they know their stuff…Thanks again
Annie LindridgeSalt Yourself Out
Thank you guys so much for all that you’ve done helping us to create a really awesome website!! We get such great feedback – everyone loves it & we couldn’t be prouder! Look forward to working with you again soon!
Wild Thyme PlantsWild Thyme Plants
Absolutely fantastically professional web developer – I would highly recommend!!! Thank you so much Kinetic Pulse!
Tania MarstonDoris Designs
I like it.  I like it a lot !!!

 You have interpreted what I wanted to achieve perfectly considering what you have to play with i.e not redoing the whole thing in the process.

Fiona Simmons-MooreSouth Gloucestershire Parents & Carers

Twitter

@HMRCcustomers Will do - thanks for the swift response

Last year from Kinetic Pulse's Twitter

@HMRCcustomers I've submitted Self Assessment repayment requests multiple times over the past 6 months (always waiting 4 weeks between) and never has anything happened. There seems to be no way of tracking or chasing them either. Now, of all times, this is important

Last year from Kinetic Pulse's Twitter

Apologies to all clients who have had website issues today. There was a major outage for our hosting company @cloudabove but, as always, they have been fantastically open and transparent about what's going on and are working hard to restore service.

About a year ago from Kinetic Pulse's Twitter

@thegrapesbath @bathdrummer Thanks - looking forward to opening night!

About 2 years ago from Kinetic Pulse's Twitter

woobox.com/tjkbms/k1orue

About 3 years ago from Kinetic Pulse's Twitter

Copyright 2021 Kinetic Pulse