Hide Menu Bar Behind Section

SiteJacket · March 12

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

Phil · March 13

Hey,

Please send us the WordPress dashboard access privately through the contact form, which is on the right side at https://themeforest.net/user/muffingroup#contact and we will check that out.

Notice!

Please attach a link to this forum discussion.

Sending incorrect or incomplete data will result in a longer response time.

Therefore, please ensure that the data you send are complete and correct.

Thanks

SiteJacket · March 17

Hi phil,

Access sent. Thank you!

Phil · March 17

You did not send the WP dashboard login address, and /wp-admin does not work.

Please send it.

Thanks

SiteJacket · March 19

Phil Mar 17, 2025

You did not send the WP dashboard login address, and /wp-admin does not work.
Please send it.
Thanks

Hi Phil,

Apologies, I thought I had sent through the login link. That's all been sent through now.

Phil · March 19

I did not realize that you have such weird and custom construction on your website. Such customization is out of scope of support, but I created a new Header (BeSupport) and assigned it to the new page (BeSupport test page) where I more or less achieved what you need.

Please check this page to see how it works and the header template and what modifications I made.

Best regards

SiteJacket · March 19

Hi Phil,

That's really close to what my client is after! Only 2 things that stand out:

After the animation scroll, there is a menu bar that looks like it's on the bottom of the section - Is there any way this could be removed? Once the sticky header appears as it does now, that's all that's needed.
The animation doesn't seem to work in mobile? Can I adjust it so that it does (and that the menu doesn't appear like the desktop version)?

Thanks!

Phil · March 19

1) To do so you must remove this section from your template. It is hard to access it because of the block with animation, but you can access it through the navigator:

(I added a custom ID to be visible better)

2) Regarding this, you should contact the person who prepared this animation for you.

Best regards

SiteJacket · March 19

Hey Phil,

Thanks again. Upon further exploration it looks like none of the links in the menu bar are working - I went into the template to see if I could see the issue, but they look like they are set up correctly so I don't know why they aren't able to be clicked on.

As for the mobile view, is there now way to replicate this exact header? Once I disable the mobile menu the animation appears but the menu is missing completely - This is expected of course, but because the animation does work on mobile, I don't understand why we cant have the mobile menu bar appear in the same way...

Thanks again!

Phil · March 20

1) Links are not clickable because you set z-index to the sticky section to -1:

2) Sorry, but I quite do not understand.

Can you explain it in more detail, please?

For now, I can suggest checking the video about adjusting the mobile header:

https://support.muffingroup.com/video-tutorials/building-mobile-headers/

Best regards

SiteJacket · March 25

Hi Phil,

Thanks for the help - It looks like I just needed to disable the mobile menu and then make a few adjustments and now it works as intended! There are a couple of other little hiccups that need working out, but I'll crack on with those myself for now.

Massive thanks to you again as this seems to have done the trick.

Phil · March 26

Always happy to help.

Please lt me know if you need assist with anything else.

Thanks

Hide Menu Bar Behind Section

Comments