[Resolved] CSS Drop Shadow for Navigation CSS Not Working

[Sean]

Hi,

I’ve tried adding a drop shadow effect for navigation menu by following this thread https://generatepress.com/forums/topic/shadow-under-nav-bar/page/2/ but it does not work for me I’ve tried changing it to sticky but still no luck.

Am I adding the CSS in the correct section? screenshot https://prnt.sc/gmurbm

Thanks,
Sean

[Leo]

Hi Sean,

Can you provide a link to your site? Thanks!

[Sean]

https://www.prototype.bridesbyfrancesca.com.au/

[Tom]

That CSS is for the sticky navigation, which you don’t seem to be using.

Try changing nav#sticky-navigation to #site-navigation.

[Sean]

Still no change, my site is set to sticky + static navigation.

[Tom]

Add this as well:

#site-navigation {
    position: relative;
    z-index: 1;
}

[Sean]

Thanks! It seems to have worked, now how do i change so it is just a subtle dark shadow that runs directly parallel underneath the navigation header?

At the moment it is a big ugly purple shadow that partly runs underneath and also cuts the right side of from the rest of the header.

[Leo]

Try this: https://www.cssmatic.com/box-shadow

[Sean]

Great tool! thanks very much all working now!

[Leo]

No problem!

[Author]

Posts