Transparent image over menu block click, can it be fixed?

HTML & CSS
1

Hi,
I have a menu that has a transparent png overlapping it partially from the top. If you follow the link you can see the banner image has logo for ‘learning3’ with a ‘g’ that hangs down over the menu. The lower section of the banner is transparent except for the bottom of the ‘g’. The menu is z-indexed behind the banner.
When the cursor is moved above the menu text into the area of overlap the menu item is no longer clickable. Clicking registers on the transparent png which links to the homepage. Can this problem be solved with CSS?

2

Hi,

Although the area is transparent it is still part of the image and will therefore overlay the nav in a rectangular shape. If you didn’t want your logo as a clickable link then you could have set pointer-events:none (very modern browsers only) on it and that would allow the click to pass through to the navigation underneath.

It will actually be impossible to achieve via z-index alone as so you will need to basically imitate old school slicing and make the little part of the g part of the anchor and not part of the logo. The following code wil acheive that effect at screens of 1024px plus.


#nav-container { z-index:auto; }
#main-nav li:nth-child(2) a {
	background-image:url(http://learning3.net/learning3/wp-content/uploads/2013/12/rough_for_new_header_90high1.png)!important;
	background-repeat:no-repeat!important;
	background-position:-64px -76px!important;
}
@media screen and (max-width:1024px) {
#nav-container { z-index:0; }
#main-nav li:nth-child(2) a { background-image:none!important; }
}

At screens of less than 1024px you are scaling the image so the above won’t work between 800px and 1024px hence the media query to remove the overlayed ‘g’ for those resolutions and let it default to your original behaviour. Above 1024px and below 800px should work fine with the above code which means most people should not have the click issue. The only other thing you could do with this method is not to scale the logo until 800px perhaps (split the text from the logo into another image.)

Hope that helps.