Content scrolling not working when position set to relative

[Frederik]

Hi,

I’m trying to recreate the header of https://theme.co/x/.
I have added #wpadminbar, .x-masthead to the “Increase/Decrease Fullscreen Height” setting in Slider revolution.

Therefore my main menu is on the bottom of my slides.

This is only possible if the header (where the logo and main menu is located) position is set to relative. But when the position is set to relative, the content scrolling option doesn’t work anymore.

When placing the position to absolute the content scrolling is working but the header is below the slider again outside the viewport when loading the site, setting the slider the full screen again.

The URL is https://cooperworks.be/home/

Thanks in advance for the help.

[ruenel]

Hello @Frederik,

Thank you for the details.

Please be advised that the initial position and the Content Scrolling works with a different purpose. The Initial position is whether it is an absolute position or in a relative position to the bar footer. The content scrolling will only work if you set the position to absolute because content scrolling means that you can scroll the contents sideways especially if there isn’t enough space to display all the elements in the row container.

To resolve your issue, set the position to relative and then the “Increase/Decrease Fullscreen Height” with the current ID and class that you are using.

Hope this helps.

[Frederik]

Hi @RueNel,

Thanks for your reply! But I don’t fully understand. When setting the position to relative the content scrolling stops working as you also mentioned in your post it only works when the position is set to absolute.

How is it possible to get the same effect as on https://theme.co/x/. Because both are working on this site. The main menu of this site is on the bottom of the screen and when scrolling down you’ll get the effect of the browser pushing the main menu below.

When the position is set to relative it looks like there is a delay before the main menu also scrolls down with the viewport.

But this is not the case on https://theme.co/x/. What am I missing here?

Thanks in advance.

[christian]

Hey @Frederik,

I’m sorry but I’m confused as to why you need the Content Scrolling. Would you mind giving us why or what you want to achieve with it to give us a bit more context and so we could give the best setup advice?

I’d also like to correct Ruenel’s response. The Content Scrolling will work both for Relative and Absolute Initial Positions. Please see this demo: https://youtu.be/ob3ALqkAk5M

Casting that aside for a moment, the Increase/Decrease Fullscreen Height option of Slider Revolution won’t work for absolute positioned elements because their height is not taken account in the page. For this case, the bar doesn’t give the x-masthead a height. In the screenshot below, the height is 0.

Try assigning a Class to your bar and use that class instead of x-masthead.

Alternatively, use the PX or % option of the Increase/Decrease Fullscreen Height.

Hope that helps.

[Frederik]

Hi @christian_y,

Thanks for your reply! Maybe it’s easier for me to explain what I don’t want. And it could be that I don’t need Content Scrolling at all.

As you can see in the above screenshot, the browser window is moving over the logo. In your example site: https://theme.co/x/ this is not possible because the browser window is pushing down the main menu.

Also when loading the site, I want the menu to be visible under the slider. I can only achieve one of both.

When applying a class to my menu and use this class for the Increase/Decrease Fullscreen Height option, it doesn’t help.

In the preview mode everything is working, but when you load the site, the issue occurs.

Thanks for your advice and I hope this it’s more clear to you of what I want.

[rad]

Hi @Frederik,

The demo has standard header while your current one uses Pro header where it follows the trigger offset. Could you try changing the trigger offset to -100? That’s equal to the current header height.

And please provide your admin login credentials in the secure note so we could compare what’s on the preview, and test the scrolling as well.

Thanks!