Off canvas to "push" when toggled

Support
#1

What’s the best way to have an off-canvas element (loading from the right) push the page content over as it moves in? The content does not need to be usable, since the background overlay will still apply. See this as an example of that I’m looking for (minus the hover option): https://superfly5.looks-awesome.com/?demo=6

#2

It would be cool to have that as a native option.

#3

Hey @JvP and @bobbyoliveri,

This is not currently possbile using the Off Canvas element so I will list this as a feature request.

Thank you for your feedback.

1 Like
#5

Thanks for the feature request add.

It should be possible to apply a transform to the main body content that matches the width of the off-canvas modal correct? Does the body get a class of x-off-canvas-active or anything like that when a modal is open?

#6

I was able to hook into the .x-body-scroll-disabled class when the modal was open (it was all I could see that was added) and then added this CSS:

#elementToMove {
transition: transform 0.3s ease-in-out;
transform: translateX(0); /* Default position */
}

.x-body-scroll-disabled #elementToMove {
transform: translateX(-50vw); /* Move left by 50vw when off-canvas is open */
}

The #elementToMove ID was added to my main section (couldn’t add it to the body since I can’t directly edit the html <body> tag).

#7

Hey @bobbyoliveri,

That would require custom JS to achieve your goal. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you for understanding.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.