0

I have a div with an inset box shadow and there are links in that div that I want the shadow to display over, but still have the links be clickable.

Here's an example: https://jsfiddle.net/5rsbn927/

<div id="navigation" role="navigation">
<div id="navbar" role="navigation"> <!-- this div has shadow -->
    <a href="#" id="link1">Link</a><a href="#" id="link2">Link</a><a href="#" id="link3">Link</a><a href="#" id="link4">Link</a><a href="#" id="link5">Link</a><a href="#" id="link6">Link</a>
</div>
</div>

The #navbar div has the shadow and the links are all inline-blocks.

I can't seem to get anything to work. z-index (with positioning), pointer-events, :before, none of it has worked so far. The only time I've managed to get the shadow to show above the links, they aren't clickable.

For the record here's how it's supposed to look; I just want to change the background but keep the same shadow when the link is hovered over: https://i.stack.imgur.com/VUA18.png (also I changed the color in the jsfiddle just so it's easier to see).

At this point I don't really care if it needs jQuery or something other than box-shadow; it just needs to look right.

qwigoqwaga
  • 37
  • 8

1 Answers1

0

The image you mentioned does not have an inset shadow but it has only a gradient on the background from white to gray. So you can refer to here.

Mohammad Rafigh
  • 757
  • 9
  • 17
  • 1
    Yes it's technically a gradient, but I was trying to recreate the same effect with a box shadow. – qwigoqwaga Oct 02 '15 at 23:30
  • did you try your shadow style (box-shadow: 0 0 2px 1px #CECECE, 0 -15px 25px 0 #F00 inset;) on your nav items too? let me know if that's what you want. – Mohammad Rafigh Oct 03 '15 at 10:50
  • Do you mean like on each actual link? I can't use the same shadow because it would look weird for each link to have a full shadow around it; it should just be the shadow on the bottom (which I have tried to recreate with a somewhat different shadow, but haven't been able to get it quite right). – qwigoqwaga Oct 03 '15 at 22:21