Using transparent header shapes as clickable areas


Author Message
Greg J

Posted: 1/20/2013
Quote message 

I posted this solution at the end of another post but I thought it too handy to leave sitting there and not likely to be seen.

A standard of html headers is to make the logo in the header a clickable link to return to the home page. This post shows you how to make a transparent overlay (or make a hotspot) on your banner logo using a header shape of whatever size you require.

I have a banner where the logo is embedded in the left side of the banner. I did not want to have to redo the banner and remove the image only to overlay it in the same spot to make it clickable. So I thought if I could make the transparent header shape into a div and make the whole area clickable I would achieve the correct results.

This is what worked for me...

1. Add a header shape to your header and position/resize to fit over the top of your logo. IMPORTANT: Make a note if the height and width properties for the shape - you will need these later. (to find these click the little drop arrow tot he right of "Edit Shapes" to view the textblock options panel, look under General)

2. Change the shape fill to transparent (click the shape to handles are visible then select Effects > Fill Color from "Edit Shapes", or do in the General section)

3. Edit the html for the shape and add the following html code (right click inside the shape and select "Edit Source HTML".

<div id="my-div"><a href="/" class="fill-div"></a></div>


Now the next step is to make this entire shape clickable.

4. Copy and paste the following code into your Export > Options > CSS Options box

#my-div {

width: 160px;
height: 75px;
}

a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}


make sure you overwrite the HEIGHT and WIDTH settings of your shape.

Enjoy!

Greg J
<div id="my-div"><a href="/" class="fill-div"></a></div>

 
Cheryl

Posted: 4/18/2013
Quote message 

Thank you so much for this, Greg. It's just what I was looking for! However, I have a challenge. When clicking the transparent shape that is placed directly over the Headline and slogan (there is no logo) , it re-directs to self page. However, if I click just slightly above it, it re-directs to the home page.

It appears to be on the top layer, because if I right click the text box for the header, slogan or background image of header, there is an option to "bring to front" but not when I right click the shape (rectangular box) I've placed over them, made transparent, and added code to.

Would you have any idea how I can fix that?

Thank you!
 
Peter

Posted: 5/15/2013
Quote message 

Cheers Greg. This is something I was just looking for. Glad I checked the forums first.

Not meaning to hijack your thread but In a related issue does anyone know how to add remove elements from the header when responsive design kicks in?
 
Tatjana

Posted: 10/8/2013
Quote message 

Greg J

This would be very nice and simple solution but it does not work for me.

It is hyperlinked now but It does not return to homepage.

For example it takes me to this link:
file:///C:/Users/Tatjanamagic/AppData/Local/Temp/Artisteer_10972/.html

While original "homepage link" is
file:///C:/Users/Tatjanamagic/AppData/Local/Temp/Artisteer_10972/home.html


It would be great if I could edit hyperlink and only add "home" into link but it does not allows editing of hyprelink it only allows remove hyperlink as an option.

Please help! This would be the most simple "clicky header solution" if someone manages that to work.

Or at least give proper code to noob like me ;)

 
Sander

Posted: 3/18/2014
Quote message 

Some help, please. I've placed a (transparent) shape over my logo, added the div to html, added the css with the width and height of my shape.

It is clickable, but only a part at the bottom of the logo, not the entire logo
i don't know why!

check http://www.sandermom.nl/joomla/
 
Karen

Posted: 7/5/2017
Quote message 

Making the header a clickable link is a lot easier than you'd expect. No need to mess with Artisteer shapes or edit the CSS. You can do it very simply through the WordPress dashboard.
Click "Appearance" then "Theme Options". You don't want Theme but instead Theme Options.
Put a check in the box next to "Make the header clickable".
Next there is a blank bar titled "Header link". Type in the link you want to use for the header. Example: http://google.com
Scroll to the bottom of the page and click the "Save Changes" button.
That's it. Now when you go to your site and click on the header it will go to whatever link you typed in.