Slider Revolution fullscreen in mobile

[flixid]

Hello,

I’m trying to create a main page with a fullscreen slider using slider revolution. A transparent header with logo and menu needs to show at the top of the page overlapping the slider.

I’ve managed to get part of this done by adding a slide to Slider Settings: Below Masthead. It works perfectly on a desktop but when viewed on a mobile device, there is a 30 pixel gap at the top of the slider which needs to be removed.

Thanks!

[Prasant]

Hello @flixid,

Thanks for asking.

You need to adjust the height of Bar under Bar > Dimensions > Height. However, changing the values will affect the logo position on desktop. To make sure changes takes effect only on mobile, please add a class under Bar > Customize > Setup > Class. After that add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .remove-top-space {
    height: 0 !important;
}
}

You can change the class name remove-top-space as per requirement.

To get started with CSS you can take a look at this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[flixid]

Works perfectly. Thank you very much!

[christian]

You’re welcome, Andy. Glad we could help.

Just want to add though that since this involves custom coding, issues that would arise from the use of the code and further enhancements should be your or your developer’s responsibility.

Thanks.