Compatibility with sticky elements

[JoryHogeveen]

The current Slidebars library isn't compatible with position: sticky; since that cannot be used with overflow: hidden; (body and html).

[sayantandas]

check how oceanwp theme is handling this. same functionality with sticky headers working perfectly there.

[JoryHogeveen]

@sayantandas
The issue is with the Slidebars library I'm using in this plugin.
OceanWP has a very different approach to off canvas elements with a lot less flexibility than this plugin.

The actual solution is probably to refactor the Slidebars library even further to a point it's just a new library. I'll have to re-think how to utilize off-canvas with as much compatibility with the various themes and browsers available.
I actually want to remove the dependency of a site wrapper as the canvas itself (which is what the Slidebars library is based upon). Removing that will also remove the need of the installation process.
This will take a lot of time in development and testing.

[JoryHogeveen]

@sayantandas
I suddenly found a hotfix that might solve issues with sticky elements. On my local machine all plugin animations and settings worked perfectly on Chrome.

A major refactor is still something that needs to be done but this might provide the fix for now.
See changes here: d4f0380

Let me know if this also fixes the issue for you!
If so I could release a 0.5.x version in this week so people won't have to wait for 0.6.

Cheers, Jory

[sayantandas]

Hi @JoryHogeveen , thanks for the response. replaced the CSS file from the new tree. Didnt make any difference for me on Chrome.
However, I did notice something . My theme needed <?php do_action('website_before'); ?> and <?php do_action('website_after'); ?> in the header and footer. So, the moment I add them, i lose the sticky function.

Perhaps someone with a newer theme may be able to test this functionality.

[JoryHogeveen]

Do you have a link to your site?

My theme needed and in the header and footer. So, the moment I add them, i lose the sticky function.

This is required to use this plugin, otherwise it won't work at all. Unless your theme supports the new wp_body_open hook.

[sayantandas]

i am building this locally. i will try to get something online for you to check.

[sayantandas]

@JoryHogeveen .. this is a demo site .. . please check . i've enabled the slider in the shop page. it doesn't have your current modifications.

[JoryHogeveen]

@sayantandas
Thanks, I see two problems:

1. I see a fixed header. This is only compatible with the Legacy CSS option (see settings)
2. I do not see my CSS changes posted earlier. See changes here: d4f0380

Please apply both and check again!

EDIT:
It seems your issue isn't with sticky elements but with fixed elements. There is a major difference between the two.
This is topic is about elements set to position: sticky;.

So in your case simply selecting Legacy CSS in the plugin settings will fix your issue.

[sayantandas]

Yes, you're right!! awesome!! Thanks so much!!

[JoryHogeveen]

No problem! And if you like the plugin, please consider leaving a nice review, it will help the plugin grow 🙂
https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/#new-post