How to extend the clickable area of a link with a background-image

[coverville]

I’m working on an navigational menu for a WordPress site. The client wants to have icons that appear above the text links (and change with a :hover), so I’ve used background-image and height to add some space above the text, and have an icon that changes with a hover.

The problem is that the only “clickable” part of the link is the text. While the background image changes on hover, it’s not part of the clickable area. How do I extend the top of the text link to include the icon?

Here’s the CSS I’m using for each menu item:

#navigation li {
   font-size:12px !important;
   height:30px;
   width:105px;
   text-align:center;
   background-repeat:no-repeat;
   background-position:top center;
   padding:80px 0 5px !important;
}

Each button has this pair:

    #menu-item-10 {
    background-image:url('http://dev.databusys.com/wp-content/uploads/2014/02/B1-GS-Home-80.jpg'); 
    }

    #menu-item-10:hover {
    background-image:url('http://dev.databusys.com/wp-content/uploads/2014/02/B1-GS-Home-INDENT-80.jpg');
    }

Thanks for any help you can offer! Brian

[Atelierbram]

You could really help me helping you by making a Codepen , for now I am guessing: is this #menu-item-10 an a link, etc.

[Paulie_D]

I think we’d need to see the HTML (or better yet a live link) but the clickablearea is usually the anchor link. This is probably smaller than theliarea due to the padding you have applied to theli.

I generally let my list items (li) derive their actual size and other properties from the anchor links….it’s just easier. Oh, any I set them to display:block too.

Try putting the bg image on the anchor links bearing in mind the above.

BTW…80px of top padding is a shipload of padding on something that’s only 30px tall.. It’s an unusual amount.

[coverville]

I created a CodePen (hope I did it right).
http://codepen.io/bibbott/pen/Bzonw

The actual site is at dev.databusys.com (and you’ll be able to see the header there)

It did help to move a lot of the CSS into the anchor links, but now I’m trying to get the menu text to appear BELOW the icon. I thought using positioning and bottom:0; might solve it, but it doesn’t seem to have an effect.

Does that help?

[Paulie_D]

I’ll be brutally honest…at first glance…that CSS looks like a mess with a lot of repeated/conflicting and overriding styles being applied.

This could take some time.

[Atelierbram]

@Paulie_D Yes it does but,

@coverville When you change the height on the link to padding-top, make it a float instead of absolute positioned ( or leave it to be only display: block), then it will work. My fork of your Codepen

BTW: Are you are going to make sprites out of those images?

[coverville]

Thanks – thats exactly what I needed.

Sprites of the icons? What do you mean?

Brian

[Paulie_D]

@Ateliebram Glad you could find a quick solution. I was spending too much time in working out what was conflicting, :)

What is needed now is to go through the non-theme CSS and comment out some of the overrides (especially to remove the !important statements and add replace with properly factored and more specific selectors.

[Atelierbram]

Sprites of the icons? What do you mean?

Well, have you not noticed that, when hovering over the icons for the first time on empty cache, the images are not loaded ?

That’s where sprites come in, besides from saving http-requests. This website has some excellent articles on that, so maybe search for that.

[coverville]

Ah, will do. Thanks.

Again, I appreciate the help from you both!

[Author]

Posts