If you add a Custom Banner you will most likely want to delete the text in the Home Page Header and Sub-Header. This creates a site Home Page that is shown as (Empty title) in the Site Outline. But the Header text is also a link to the Home Page from anywhere in the site. With a Custom Banner, you lose this link.

I found a work-around to make a Custom Banner clickable and returns the site user to the Home Page and does not use any fancy CSS knowledge or Design editing but does use Sandvox Pro.

Note: This is 'pushing' Sandvox to do things it is not intended to do and so must be considered as *experimental*

[This is my 1st experiment using the Sandvox Simply Colorful Design]

[This is the same site using Sandvox Smooth Dark Design]

Update: I am now using the method on this site with the image at the top of the page. I have also found out some more tips to make it work. 

Notes:

• I did *not* use Inspector > Site > Media > Banner to place the banner. In fact, I left it empty.
  
  
• I pasted my code into the Sub Header area (second green dot down, in the header area), not in the Header. I found that this meant that I did not have such a big margin above my image.
  
  
• I did *not* drag and drop an image into the Sub-Header.
  
  
• I use [ImageWell] to upload my image to a folder on my site and create the link to the image I used.

Advantage:

• If you publish different sites to sub folder, it is possible to add a clickable header that returns to the main site. I have done this with the Comments - The Different Systems Side-by-Side main page.

Observations:

• Which Sandvox Design is used, *does* change what happens. Some Designs are wider or not as wide; some automatically centre headings, other do not. So this is not a 'verbatim' tutorial.
  
  
• I found that the maximum image width for the Simply Colorful Design is 761 pixels wide. The design is 771px wide. To my eye, 750 pixels wide looks more central. (For now, I have changed the width to 700 in the code mentioned below so that the browser resizes the image. The original image is 761px).
  
  
• There does not seem to be a limit on the height but I have not tested for what the limits may be.
  
  
• I uploaded the image to my server using an FTP client (ImageWell). I put it in a folder call _uploads. Often people use a folder called images
• You could let Sandvox do this by adding a download page using the same method to [upload the image map described in Steps 2-4 here].
  
  
• Create an HTML image link that links to the site's home (or the page you want to return to). I used an 'absolute' link structure.
  
  
• Tip: Use the HTML Editing Window to paste the code into.
  
  
• Tip: You need to place a text character *before* the image link, otherwise Sandvox automatically deletes the link.
  
  
• Tip: I used the invisible non-break space character   for my text character.
  
  
• Warning: If you try to re-edit the link, Sandvox deletes the all text and HTML code, even with an extra text character. So you need to have a copy of the code you use then re-paste it in the Sub-Header HTML editing window. Click the Sub-Header Editing Marker (lower green button) to open the HTML editing window.
  
  
• Important:  Make sure you select the Home Page to edit the Sub-Header.
  
  
• Tip: By using the <h1> tag, there is no underline for the image link but the height of the header is larger.
  
  
• Code Adjustment: You will need to edit the sitename, image name and upload folder name (if used) as well as the image alternative name and pixel width and height. Why I needed to change the &nbsp; and <h1> positions shown below, I don't know. And why Simply Colorful has a white dot in the centre of the page, I don't know also.
  
  
• This is the code I used for this site using the Simple Gray design.
  
  <h1>&nbsp;<a href="http://www.isawhow.com/"><img src="http://www.isawhow.com/_uploads/i-saw-how-title-logo-bw.png" width="350" height="40" alt="I Saw How - Finding Solutions" /></a></h1>
  
  
• This is the code used with the Simply Colorful design.
  
  &nbsp;<a href="http://www.isawhow.com/_tests/custom-banner/"><h1><img src="http://www.isawhow.com/_uploads/clickable-custom-banner.png" width="700" height="100" alt="clickable-custom-banner.png" style="outline:none;" /></h1></a>
  
  
• This is the code used with the Smooth Dark design. I altered the width because it is a narrower design and I needed to add the center tag:
  

&nbsp;<a href="http://www.isawhow.com/_tests/custom-banner-sd/"><h1><img src="http://www.isawhow.com/_uploads/clickable-custom-banner.png" width="700" height="100" alt="clickable-custom-banner.png" style="outline:none;" /></h1></a>

How To Do It:

1. Make sure you are working on the Home Page in the Site Outline when editing the Header and Sub-Header text boxes i.e. Click to select the Top page in the panel on the left side on the Sandvox window.
   
   
2. Delete the Title text.
   
   
3. Make sure the View > Show Editing Markers, little green buttons are showing.
   
   
4. Click the bottom Editing Marker button to edit the Sub-Header text area.
   
   
5. Put in a single text character (or more) before the link. If you don't Sandvox deletes the HTML you add.
   
   
6. Copy the prepared and edited image link HTML as mentioned above.
   
   
7. Open the HTML Window for the Sub-Header, Edit > Edit Raw HTML... 
   
   
8. Paste the prepared and edited image link HTML code and close the HTML editing window.
   
   
9. Publish the Site