Sticky Div Not Working

[whitemedia]

Hi,

I have two websites where I have a 2 column row. The right column has a form, which should become sticky when scrolling begins.

I am trying to use the CSS:

position: sticky;
top: 150px;

On the first website it works perfectly. On the second website, which uses a clone of the Pro Layout, the sticky form will not stick!

The only difference between the two websites is that the second one has a div with the sticky ID. The div contains a heading, text and form integration. On the first website the form integration has the heading and text within the embedded form and the sticky ID is applied to the form integration element.

On the second website I have even tried removing the div and making it a simple sticky form integration element identical to the first website. Despite this, it will still not stick like in the first website!

I have checked for typical issues such as overflow and flex, but both websites are identical in their set-up.

Are you able to help?

Thanks,
Christopher

[tristup]

Hi Christopher,

It seems that issue with the custom CSS code. Please remember that investigating custom codes or related issues is beyond the scope of our theme support.

I would suggest you hire a developer who can assist you on this or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[whitemedia]

Hi Tristup,

Thanks. It still doesn’t make sense as the CSS used is identical in both cases.

Many thanks,
Christopher

[tristup]

Hi Christopher,

It needs proper investigation by comparing these two sites, and as I said investigation of custom code is out of the scope.

Thanks

[whitemedia]

I have solved the problem, which I hope will help other users.

This is the CSS used:

/* Sticky Right Column & Div */
body {
overflow-x: visible;
}

.x-col {
position: -webkit-sticky;
position: sticky;
top: 150px;
z-index: 99;
}

#sticky-form {
position: -webkit-sticky !important;
position: sticky !important;
top: 150px !important;
}

The ID #sticky-form is applied to the div which contains the form. In my case, the div sits immediately within the column.

Additionally, the text size of the elements of the div were altered to keep the div visible on smaller laptop screens and a margin top and bottom of 5px was placed on the div to give it some white space.

Many hours spent on this simple solution - all thanks to: Make row or element sticky within section for pointing the way!

Hope this helps,
Christopher

[nabeel]

We’re glad you sorted it out and thank you for sharing the solution with us.

Cheers!

[Lutz]

Hi, thank you for sharing your solution.

body {
overflow-x: visible;
}

Works for me as well to make element sticky. The problem is that it messes up the responsiveness of my website. Does that work completely problem-free for you?

There got to be a better solution to make something sticky in X-Theme.

Best regards,

Lutz

[tristup]

Hi Lutz,

There might be some different reasons behind your issue, I would like to suggest troubleshoot the following common issue to help us to recognize the reason.

1.Plugin Conflict
2.Theme Update related issue
3.Child Theme Related issue
4.CSS/JS Customization
5.Disabling Cache

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of this helps, please create a new thread and please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks