Need to add a hyperlink to a logo

I’ve put a logo on my site’s homepage and the logo was clickable. And then I adjusted its position through custom.css file, but now the logo is NOT clickable (plain image). How to make it clickable again?
Here’s a homepage of my site:

Hi kotkowski,

The reason the logo isn’t clickable is that it is covered by the next module div that has relative position.

You could simply make the logo clickable again overriding the position by reset it in this ruleblock:

#toolbar .float-left .module:last-of-type {
    float: none !important;
    width: 100% !important; 
    position: static; /* add to override its previous "module" ruling */

To do that you may also have to correct the typo: this ruleblock lacks the end curly bracket. It causes the next ruleblock to be attached and become ineffective as invalid. (The width lacks a semicolon, which is ok as the last in the ruleblock, but now is also regarded invalid because the missing end bracket includes the next ruleblock.)

That was the easy quick fix for this issue, but the anchor is not clickable because the floated image isn’t contained. It’s only the image that is clickable because it is wrapped by the anchor.

To also fix that, you could give the anchor a css table display to clear the floated image:

#toolbar a, #toolbar a:visited {
    color: #000;
    display: table; /* add as a clear-fix */

If you validate your code you’ll probably find more errors, but that’s another problem. :slightly_smiling_face:

1 Like

Ok, I got it… just had to change the last line of code in custom.css and now it’s working. Thanks a lot!

As per second block of code… I didn’t understand why would I need it, since the logo is clickable already?

You just answered your self. :wink:

Seriously, in the future you might want to style the anchor around the image for example and then you would already know how to make the anchor wrap/contain the float. Without the clearing the anchor has no size. :slightly_smiling_face:

I’m not sure the floating is necessary, you could also try remove the float-left class on the image.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.