Fixed revolution slider

Hello!

How can I fix the position of the revolution slider?

The css code does not work, the betheme setting always overwrites it.

own css code:

rs-slide {

  position: fixed;

display: block;

  overflow: hidden;

  height: 100%;

  width: 100%;

  z-index: 20;

  opacity: 1;

  visibility: inherit;

}

when the page loads:

rs-slide {

  position: absolute;

  display: block;

  overflow: hidden;

  height: 100%;

  width: 100%;

  z-index: 20;

  opacity: 1;

  visibility: inherit;

}


Thanks, György

Comments

  • Hi,

    Please always 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.

    Can you also explain how it should work, please?

    Should the whole slider be fixed or one of its layers?

    Thanks

  • edited September 2022

    Hello!


    My website url: www.helpee.hu

    I want to fixed the whole slider as here: https://themes.muffingroup.com/be/firm/ (although this is an image here, not a revolution slider)

    Thanks.

  • Please, do not share your login credentials on the forum, as others can see it. If I will need them I will ask you to send them through a private message.

    The demo you mentioned does not use Slider Revolution.

    To achieve that, please, go to Betheme -> Theme options -> Global -> General set the Image background, choose the position to be fixed and choose Content transparency.

    Best regards

  • Thanks for the reply.

    I know that the demo sent does not use the revolution slider, I wanted to show the fixed background.

    What I would need is for the current revolution slider to stay fixed in place and for the next block to slide onto it.

    If I fix the location of the slider in the css, some setting overrides this:

    own css code: 

    rs-slide {

    position: fixed;

    display: block;

      overflow: hidden;

      height: 100%;

      width: 100%;

      z-index: 20;

      opacity: 1;

      visibility: inherit;

    }

  • Please, try to add !important property to the position attribute.

    You can also try using the .mfn-rev-slider class instead.

    .mfn-rev-slider{
    position: fixed!important;
    }
    

    Best regards

Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.