[MOTMFUParticipant]

I setup a full screen slider above the masthead with a transparent slide that shows a full screen background video. That works! What is the best way to have it fixed to where when someone scrolls only the masthead moves upward over the fixed slider?

thanks!

[MOTMFUParticipant]

I found this thread asking the same question but not sure if it still applies considering its date.

https://community.theme.co/forums/topic/fixed-slider-below-masthead/

[Rue NelModerator]

Hello There,

Thanks for posting in! You want to have a fixed slider in your site? Please clarify. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Best Regards.

[MOTMFUParticipant]

My site is in a sandbox environment with no access from the web

[Rue NelModerator]

Hello There,

Thanks for updates! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[MOTMFUParticipant]

A good example is if you visit http://www.mrchoonola.com

You will notice the full screen slider does not scroll. It is fixed as the user scrolls.

Can revolution slider be set to this?

[John EzraMember]

Hi there,

Thanks for updating the thread! This is a scroll/parallax effect. Depending on how you have your site setup this may or may not work. This is assuming you have your slider in the above masthead position. If so, you can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-slider-container.above.bg-video {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    position: fixed;

    top: 0;
    left: 0;
}

/* optional if your site content has a transparent background */
.x-main.full {
    background: white;
}

Hope this helps – thanks!

[Author]

Posts