Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS box shadow not working with fixed element ? Reply To: box shadow not working with fixed element ?

#264593
sushmitg
Participant

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.