I've been designing a new theme out of boredom and found an idea I really liked. It uses the :before and :after pseudo-elements to put two images on top of the menu bar, to make it loo like some animals are walking/hanging on it.
The problem I'm having with this is the fact that these elements then make the button parts underneath unclickable. There are several pixels at the top where, even though not directly under an animal, can't be clicked. The logo, which is meant to sit behind the image at the left, can only be clicked at the top above where the generated block is.
If you're confused, see the jsFiddle. In this example, the logo isn't present so you can see that link behind it is completely unclickable without tabbing.
Is there any workaround/hack that can make the image still appear on top of all the content, but still allow the links below it to be clicked through the image? Perhaps an alternate way of adding the images on top so at least the space in between them is clickable?