drop shadow on sticky header

[asterdaster]

asterdaster

January 13, 2024 at 7:16 pm

Hi,

I would like to add a drop shadow to my sticky header. I’d like the drop shadow to not be visible when the page loads but to be visible on scroll. I have searched through the forum and have found two pieces of CSS code. The first works perfectly on desktop but doesn’t seem to do anything on mobile.
*Login to see link

#main-header .item-is-fixed {
box-shadow: 0 2px 4px rgb(45 62 80 / 12%);
}

The second code works perfectly on desktop and mobile with the exception that the shadow is visible on page load.
*Login to see link

#masthead, #masthead .item-is-stuck {
-webkit-box-shadow: 0 2px 4px rgb(45 62 80 / 12%);
-moz-box-shadow: 0 2px 4px rgb(45 62 80 / 12%);
box-shadow: 0 2px 4px rgb(45 62 80 / 12%);
}

I’d appreciate if you could provide me the CSS that works on all devices and only has the drop shadow when the user has started to scroll down the page as in the first example.

Thanks,
Gary