Header and footer still visible when New Royal Slider is full-screen

[janpeeters 31]

I'm using New Royal Slider for a Flickr slideshow on the following page: https://janpeeters.nl/jms/over-energiek-leren/ When I activate the full-screen functionality the PL5 header and footer remain visible. I've tinkered around with z-index to try to heighten the full-screen slider but didn't get it to work. Could this be a 'bug' of 'oversight' in PL5? Or is it something outdated in NRS, it's the latest version, recently updated.

[Andrew 207]

The problem is because Royal is not appending itself to the body and is instead trying to go full screen from inside the section. (not best practice)

You can fix this by adding this rule 

.pl-sn-pad{ z-index: initial; }

Although it may cause issues in other areas of the site. 

 

[janpeeters 31]

Thanks @Andrew that works fine for now. I'll contact the plugins author and hope that he will change that behaviour. 

[janpeeters 31]

Hi @Andrew I contacted Dmitry Semenov the author of Royal Slider. He answered the following:

Quote

Your theme is forcing z-index on relative-positioned element, which is impossible to overlap. If you don't want to apply above style all the time, you can use slider JS API and events like rsEnterFullscreen http://dimsemenov.com/plugins/royal-slider/documentation/#api to toggle it only when slider is is fullscreen mode.

 

 

Helas, his suggestion goes beyond my skills to implement. Don't know much about PHP :-( But I thought I reports back what he wrote.

The API he mentions says:

slider.ev.on('rsEnterFullscreen', function() {
    // enter fullscreen mode 
});

He didn't respond to your remark about 'not appending itself to the body'.

Jan

[janpeeters 31]

@Simon @Andrew To get Royal Slider really full screen and on top of all Pagelines elements Andrew provided me with the following code:

.pl-sn-pad{ z-index: initial; }

That worked great but it stopped working the update to MegaNav so that dropdowns would not fall behind body containers when MegaNav was in a container.  See this issue:

 

Is there a way to get Royal Slider really full screen again? You can see this behaviour here (scoll down a bit for the slider):

http://energiek-leren.nl/over-energiek-leren/

Thanks for any help,

Jan

[janpeeters 31]

Problem solved. I added !important to the code that Andrew provided and Royal Slider was again on top.