How to make a full screen hero slider with menu

[deranaloge]

hi there,

i have a question how to make a full screen hero slider with a nav bar.
in the past i made it this way:
bar one: 10 em height
bar two: calc (1oovh - 10em)

in bar one there was the nav in bar two the rev slider in a content area.
the goal is that the nav bar and the rev slider are 100vh at all with a fixed nav height.

but now it seems it does not work anymore. any help?

thanks in advance

[ruenel]

Hello Harald,

Thanks for writing in!

Please keep in mind that when using calc(), please leave empty spaces like “calc(100vh - 10em)”. And if you want to have a fixed nav menu, you will have to use 100vh for the second bar and then the first bar should be positioned as absolute.

Please let us know how it goes.

[deranaloge]

hi ruenel,

thanks for your answer.
if i make the first bar absolute and the second bar 100vh, the nav bar is over the slider.
what i need to archive is:

the navigation should be 10em
the slider should have the height 100vh - 10em. so the navbar and the slider is full screen on every device.

i did this in a past project and looked there, did the same settings but it does not work with new version of pro and rev slider.

any advice how to archive that?

thanks in advance

[deranaloge]

ok so i added this to the custom css:

   #rev_slider_2_1_wrapper {height: calc(100vh - 10em)!important;}

now the slider has the height he shoud have. but now there is another problem:
the text is not centered anymore…

dont know if my css is the best solution?
i dont understand why the slider isnt scaling??

[rad]

Hi Harald,

It doesn’t need a custom CSS, your slider isn’t going full-screen because it’s not set as full-screen. And its not related to the theme features.

And since slider has no offset value for EM, we should add it in pixel. 160px

I created a test page and cloned your header and slide to demonstrate it.

On the cloned header, I also change the content area to text element and change the second header height to calc(100vh -10em) instead of auto. It’s not needed, but just another demonstration that it’s slider’s configuration that makes it work

By the way, all of that setting in the slider is under the Layout section.

Thanks!

[deranaloge]

wow. thats it… just that simple?
many thanks.

one more question, how can the : decrease module height by container be used?

thanks in advance

cheers

[rad]

Hi Harald,

I’m not sure if I understand your question correctly, is it still related to slider? The size should be defined by the content which happens to be the slider so the container should only follow that size. Then since the slider is full-screen, it should automatically follow the viewport size (screen) minus 160px (10em).

Else, please provide more information like which module and container.

Thanks!