Header z-index vs. Revolution Slider z-index

Support
#1

Hi there.

1
I have set the z-index of the bar in my left left header to 9998 and the z-index of Revolution Slider in top of front page to 9999. Yet the Revolution Slider doesn’t cover the bar. What did I miss? How do I alternatively achieve that?

2
Also, the intention of the revolution slider is to work as a full page landing page. A few drawbacks of doing is this way, however:

2.1) The revolution slider will appear a fraction of time AFTER the background image - hence the user will first see an image before the revolution slider starts. How can I avoid this?

2.2) The revolution slider will reappear if user scrolls back to top. How can I avoid this?

Thanks.

#2

Hi There,

There’s no revslider when I check your homepage:
Technically, revslider should be on top of the bar but, it is still depend on how you have added the revslider. Revslider location depends on how z-index will work. Can you point us to the page where you have added the slider?

2.1, We need to check which background image too. Please share the URL with the slider

2.2 If you are adding revslider using the Masthead option, it will stay even after you scroll. There’s no option that will hide this slider after scrolling down and it can be achieve using customization but that would be outside the scope of our support.

#3

Hi there.

Hmm, that’s strange. I see the revolution slider ‘loud and clearly’. I have added it above masterhead in header. I added the z-index: 9999; under the sliders ‘custom css’.

The background image you are asking about could be two: Either the Revolution Sliders background image (see URL in note) as set under Layout & Visual. Or the background image of the successive section (identical image). Go to ‘Sider’ (‘Pages’ in English) menu in wp-admin, then choose the page ‘Hjem’. The backgorund image is the one of the top section named ‘Intro’.

Okay, so I cannot hide the Slider using Masterhead option. However, using a Section, doesn’t enable that neither. In fact, I actually want it to be a landing page and - exactly as you indicate - hide it after scroll, Now how do I do that?

Thanks.

#4

Hi there,

Adding just z-index: 9999 !important; in the custom CSS of Revolution Slider will not work. Kindly try:

#rev_slider_1_1_wrapper {
    z-index: 9999 !important;
}

Hope this helps.

#5

That worked, thanks :slight_smile:

In the above you said: “If you are adding revslider using the Masthead option, it will stay even after you scroll.” I am very curious as to which solution that would accommodate that?

#6

Hi,

Sorry for the confusion.

My colleague means that if you are using the masthead option, the revolution slider will always reappear if user scrolls back to top.

It’s possible to hide the slider after scrolling down using customization but that would be outside the scope of our support.

Thanks

#7

Hi guys.

Thanks. I did see a colleague of yours answer this question in a support ticket (JS code), but don’t seem to find it again. I get that it is outside the shop of your support. Appreciated anyway. Can I just ask: 1) Would it be possible to place the revolution slider in a header and make the header show only before scroll? or 2) Which class or id should I refer to it I would like to hide the id / class after X seconds?

Thanks.

#8

Hello There,

Thanks for updating in!

1.) Yes it is possible to add a slider in the custom header. The only problem is that there is no available feature yet where you can hide or show a header object before or after the scroll. As @Paul mentioned that it is only possible with custom development. Perhaps these links could help you:


2.) At the moment with your slider in place in the homepage, you can make use of this class x-slider-container

Thank you for your understanding.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.