Rev-slider in header builder pro

[iTurtle]

hi there.
if i understand it correctly the rev-slider should show in the published page but not in the preview in the header builder. but in my case the slider does not show at all. also no text message.
i use the short code in a text field.
why i want this and not the above masthead solution, is that i can then better choose on which devices the slider is being displayed since i can use the same settings as with any other element in the header builder. if i use the rev-slider with above masthead i have to use the sliders settings for that and they differ from the header builder options.
thanks for helping! best wishes, kai

[rad]

Hi @iTurtle,

Thanks for reaching out.

I checked and looks like it’s due to flex styling and the slider is rendered as flex element, and because of this, the resulting height and width of the slider is zero. Flex layout alignment and sizing depends on the amount and size of the elements within it, while the slider depends on the container which happens to be flex (has no initial dimension).

I added this to our issue tracker, but for the meantime, please add this to the container’s Element CSS where the shortcode is added.

$el.x-bar-container {
display:block !important;
}

And please also change the header bar height instead of just 6em. Like 40vh, you can play with the values until it fits to the slider

.

Thanks!

[iTurtle]

dear rad,
thanks a lot for your help!
i did as you suggested but the slider does not want to appear.
i also tried putting the code into the bar css, container css and element css.
i also removed to avobe-masthead slider in case they collide.
but i only have a nice large 40vh high space on the page where the slider is supposed to be.
if it is not possible for now i will just use the masthead slider.
but maybe you could have a second look?
thanks a lot! kai

[rad]

Hi @iTurtle,

Looks like needs a width too,

 $el.x-bar-container {
display:block !important;
width: 100% !important;
}

I created a test page and header.

Thanks!

[iTurtle]

hi @rad!
thanks again! now the slider is visible slight_smile:
but… the v-space is not adapting to smaller screens. the result being a lot of white space below the slider.
also there are inconsistencies between the header-editor and the page preview regarding that space.
i think i rather wait for the official solution for embedding a rev-silder in the pro header. preferably as an element and will revert to using the above-masthead solution.
but thanks a lot for helping! best wishes, kai

[rad]

Hi @iTurtle,

Sure, and yeah, the slider responsiveness doesn’t work well on flex restricted layout and needs a defined dimension. But with a defined dimension, there will be spaces.

Cheers!