Seems silly, but how would I remove or change the hyperlink from the header area? This seems to be a built in feature and I can't find any reference to it. Thanks!

If you have an Advanced or higher squarespace account, then you can add your new header without a link in the code injection section.

To do this, go to control panel -> Website Settings -> Code Injection -> Site Banner HTML override

From there you can add your logo or image without adding a href link to it.

Doing it this way can I still have different headers for each section or page?

Don't have an answer right now, but we're working on a project with this issue, specifically. I'll let you know what happens when project is complete.

Here is a great way to achieve what you are trying to do. If you are not afraid to add a little JavaScript coding (I'm making no assumptions), you can manipulate the header and/or header links on each page individually as you want. You can do this by adding a script to each page at the top, and it will change the header for that specific page only.

Here’s an outline to do it:

1. First off, I usually use jQuery for my coding. It is a JavaScript library that allows you to do a lot with minimal coding. If you follow this method, then you will first need to download the script and add it to your storage. First go to jQuery website at: jQuery. From there, click on the Download jQuery button, then save the file it brings you to. That file should be called "jquery-1.2.6.min.js" . Download this file, then upload it to your squarespace storage; usually under a folder you can create called "scripts" so you can easily reference it.

2. Ok, now you must reference this script so that is can be used throughout your website. If your Squarespace account allows for Code Injection, than you can add in the header override, so that it will be used throughout the entire website. If you do not have code injection ability, then you will need to reference the script on each page. Either way will work fine. Here is the script:

<script type="text/javascript" src="/storage/scripts/jquery-1.2.6.min.js"></script>

(Please note that in my case I have placed the script under a folder I created called scripts.)

3. Ok now just add the following script to each page to do the work of editing the header. I wrote this code generically for you, and you can revise as necessary if you need to make changes. First go to the page you want, then in edit mode in raw html, add either one of the following scripts at the top:

4. To remove the header link, use this following code:

<script type="text/javascript">
$(function(){
$('#bannerWrapper').remove('a').append($('#banner'));
});
</script>

5. To change the href link, then use this code instead:

<script type="text/javascript">
$(function(){
$('#bannerWrapper a').attr({href:"www.google.com/"});
});
</script>

(please note that you will need to replace the ‘www.google.com’ with the URL of your choice.)

Ok, good luck. Let me know if you need further help or wish to revise the scripts more.

- Chris

This is perfect! Thanks! I am experimenting with it now.

Could this be used to apply a clickable link to my "header" at http://www.kpg.squarespace.com - I am not using the normal header, and instead applied a background image to the body (top left triangle). It would be great if clicking in this area could take the user back to home.

Another question:

If the script has to be added to each page - then if the client adds new pages the script would not be accessible for those pages? Can I put the whole script in the header code injection to work on all pages that are generated?

Also, Do scripts entered in the header code injection only work for the header area? If I am trying to apply the code to something else, do I put it in a different code injection point?

Ok, here's the answer to your two latest questions:

To answer your last question first... I feel that this script should be added to your header override just below the link to the jQuery script. This way you only have to write it once and it will be used throughout your website. However if you need different header links on different pages as you had previously written, then in that case it's best to add the following script to each page only as needed.

Ok, now for your first question:

I just wrote a new script for you that you can try. What it will do is create a transparent <div> placed over the logo. The size I put is 510x84 and placed in the upper left corner. Then when you click on this <div>, it will open your home page. Please note that I only chose the 510x84 size so that the <div> will not cover up any of the text and content you have written under your Keyes Packaging logo. Otherwise when you shrink the page, there will be a conflict when clicking on this new <div> and the content you have written below. You can edit this script as needed by just experimenting and changing the width and height that I wrote to match your needs.

Please note that you will first need to upload the jQuery script to your storage as I have previously wrote.

Here's the script to place at the top of your page:

<script type="text/javascript">
$(function(){
var transHdr = $('<div>').width(510).height(184).css({position:'absolute', cursor:'pointer'});
transHdr.click(function () {
window.location = "http://kpg.squarespace.com";
});
$("body").prepend(transHdr);
});
</script>

Ok, that should do it. Please let me know how it works out for ya!

-Chris

This is great! Thanks so much!! Now my header area is a link, just what I needed!

I tried putting the whole script in the head code injection point but it came back with a <div> error. I then put it in the page code and works well. How do I get it to work in the code injection area so that I only have to enter it once?

This is what I currently have in the head code injection point:

<script type="text/javascript" src="/storage/scripts/jquery-1.2.6.min.js"></script>

This is what I currently have in the page html for 'about us':

<script type="text/javascript">
$(function(){
var transHdr = $('<div>').width(510).height(184).css({position:'absolute', cursor:'pointer'});
transHdr.click(function () {
window.location = "http://kpg.squarespace.com";
});
$("body").prepend(transHdr);
});
</script>

Nevermind - I was spacing out and putting the whole thing in the <head> code, rather than putting it in the banner code injection point, duh.

Thanks so much for your help with this!
What a great workaround!
You rock.