Is it possible to hide menu bar behind Slider Revolution?
Hi,
I'm building a custom slider for a client which, on scroll, has the company logo animate then fly up to "form" the menu.
Is it possible to hide the website's existing menu (regular and sticky) behind the Slider Revolution section to have it appear once the visitor scrolls past? I've tried using z-position but have had no luck with that so far.
You can see the animation/menu bar in question at the following link: https://amici.art/tester-home/
If there are other suggestions you have to perform this task, I'd also be willing to work through them.
Many thanks,
Joe
Comments
Hi,
There must be something wrong with that website, as this is how it looks for me:
For me, the header appears all the time, and the second screenshot shows how it looks after a small scroll.
Anyway, we do not have a feature that will hide the slider behind the slider and show it as it passes by it, and I do not have any workaround for you, unfortunately.
Best regards
Hi Phil,
Thanks for replying. I think you may have misunderstood what I'm after - Basically I do not want the menu bar to appear until after the visitor has scrolled past the Slider Revolution section.
Can I use CSS to set the menu bar to display: none only for it to reappear once the visitor has scrolled through the animation section)? Or is there a way to disable the default custom menu on a certain page and have the sticky menu appear after the Slider Revolution section?
Many thanks,
Joe
For that, you can use a header style. Go to Betheme -> Theme options -> Header & Subjeader -> Header, and choose Below slider header.
Best regards
Hi Phil,
Thanks for that. Unfortunately I'm currently using a custom (template) header - The client really wants the coloured circles in the menu bar to represent different areas of the website - So sadly I can't use a header style.
Is there a way to change the z-index of the slider revolution section to position itself over the top of the custom header? I don't mind the header working the way it would normally if its z-index is lower because once the visitor scrolls past the section, it would just appear normally.
Basically, the client wants this fancy animation to "become" the menu bar as they scroll down. If the default and then sticky work as normal "behind" the Slider Revolution section and then appear as the visitor scrolls past the section where it will overlap the one created by Slider Revolution, it will create the illusion of seamless integration.
You can put a section in your header template before the existing header and put the Slider Revolution shortcode there:
Set the element with a shortcode to 100% width:
Then, activate the sticky header and customize it without the shortcode.
https://support.muffingroup.com/video-tutorials/how-to-activate-sticky-header/
Best regards
Hi Phil,
Thanks again. I kinda figured out what I needed by utilising the single page's CSS this way:
.mfn-main-slider {
z-index: 9999;
}
This seems to have done the trick, but now there's a gap at the top of the slider that shows the sticky menu behind it. I'll get to the bottom of it.
Cheers for your help!
Please attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
Thanks