Hide Menu Bar Behind Section

Hi all,

This is a follow-up from a previous discussion, but I've changed tack and instead used CSS animation to achieve a scrollable, animated section for my client.

Is it possible to hide a menu bar behind a section on a page? I'm currently using a custom header/menu template, and have tried to play around with z-index positioning (giving the animated section a higher z-index than the menu bar), but although the fixed menu bar is hidden, upon scroll the stick menu bar appears before the animation is over. Ideally, my client wants the menu bar to appear after a visitor has scrolled past the section.

Also, the client has asked for a similar thing for the mobile version, as they do not like the bar appearing immediately on the mobile version.

Another oddity is that the bottom of the sticky header randomly has coloured lines appear.

You can see the animation in question here: https://amici.art/tester-home/

Any help, as always, would be greatly appreciated.

Many thanks,

Joe

Comments

Sign In or Register to comment.