box shadow not working with fixed element ?

[sushmitg]

Hi,

i am running into problem. basically i have a navbar which is supposed to have 50%-60% of shadow starting from right end which goes 100% when user scrolls.
(there’s a logo on left going past the navbar height and shrinks to fit inside navbar height when page is scrolled)
here’s working example : sushmitg.github.io/sgedge

inspired from this post: https://css-tricks.com/almanac/properties/b/box-shadow/

i tried cloning the effect no. 4 in 3d effect example at the bottom of post.

Now the issue is right now i am accomplishing it by giving the header position of sticky which is not supported in all browsers but if i give position of fixed to it the pseudo element responsible for shadow behind it comes to front (z-index issue).

how to fix it ? the project seems to work fine in chrome only.

[Paulie_D]

A reduced demo in Codepen.io would be helpful rather than a link.

[sushmitg]

sushmitg.github.io/sgedge

this link is live. later i will move it to custom domain.

i am not using codepen because there’s possibility that inhereted styles might be causing the issue.

still i’ll make codepen if u want.

[sushmitg]

well here’s codepen as requested.

https://codepen.io/sushmitg/pen/zpNmQR

[Paulie_D]

Seems to be working in the Codepen….unless I’m missing something.

The shadow is behind the image when the document is scrolled.

[sushmitg]

i know its working but change the position of header to fixed then the pseudo element casting shadow comes to front.

basically what i want is that the 4th example on this page https://css-tricks.com/almanac/properties/b/box-shadow/
to be a top fixed navbar and when page is scrolled the shadow to be equal to the width of navbar.

when position is changed from relative to fixed this is what happeneds

https://codepen.io/sushmitg/pen/ZvLwZJ

this is working with header{ position: sticky } and that too after googling this code “transform-style: preserve-3d;”

and position sticky is obviously not an ideal code for fixed top navbar.

also if you will open the github link in microsoft edge browser, you will notice that the logo is behind the navbar for some reason.

[Author]

Posts