Create Frozen Header That Changes As You Scroll Down With Pinned Logo And Menu Bar

Ask the community
,
1

Hi guys,

So my website is built and live and all is good.

Just one issue is that I want to create a shaded strip to go behind the other elements on my header ie. Logo (far left top corner) and Menu Bar (far right top corner) and only becomes visible once scroll up or down is initiated.

When the Home page loads the menu bar text is white set against a blue background so shows up fine but as you scroll down it becomes hard to see as there are a lot of white areas on the page. A shaded strip that only became visible once starting to scrol would solve this.

I always want the logo and menu bar to appear in their respective top left and right hand corners whatever size screen the site is being viewed on so at present I have the logo pinned top left and the menu bar pinned top right.

Is there a way to keep the logo and menu bar in place and have the shaded strip header background only become visible once scrolling?

Thanks,
Justin

1844×1076 341 KB

1 Like
2

Hi Justin,
You can check out our example and video tutorial for that purpose.

Good luck!
Tal.

3

Hi Tal! I followed the tutorial and it went smooth, now I have an awesome header that changes on scroll. Now my next question is, how do I get my Scrolling header to drop a light shadow? Can this be done somehow?