How do you get it to work?

Hi @antdx

Did you check the installation documentation? It should get you started with your specific theme. https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup

Regarding your CSS. If these are the actual classes for your sidebar then this should work fine.

Keep in mind that the sidebars are not visible by default (off canvas) so you’ll need to place triggers in our menu, widget, or anywhere to show them. https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Triggers

Cheers, Jory

Where do you put the shortcode?

Is there a button to open and close the sidebar? I’m not sure how it works exactly. Does it hide by default if done right?

Hi @antdx

It hides by default.
The shortcode can be put wherever you want it to be.
And if the shortcode is configured as a button then it will indeed show a button to open and close the sidebar.

Please read the documentation ?? If you are unfamiliar with shortcodes, this is a WordPress feature, see: https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/

This plugin gives you the tools to add off-canvas sidebars to your site and render triggers on various locations. It’s up to you to configure it exactly how you like it.
Also keep in mind that this plugin does not create any default CSS for your triggers, menu’s or anything. Only some basic (mostly functional) CSS for the sidebars to work.
All other styling/UI should be done by your theme or yourself. Every theme is different and thus will display things differently.

Cheers, Jory

can you send an example of it working and the screenshots of where everything goes please? I’m not sure where the add the codes that are on the pages. Do they go in the pages CSS? Sidebar component Custom CSS? add some HTML? Header Footer?

I use shortcodes all the time with the plugin Code Snippets.

• This reply was modified 1 year, 5 months ago by antdx.
• This reply was modified 1 year, 5 months ago by antdx.
• This reply was modified 1 year, 5 months ago by antdx.

Hi @antdx

I’m not sure I fully understand what you are asking.
Shortcodes are not CSS or HTML.. they are placed in a block or within your post content. Basically any location that supports shortcodes.

Therefore I can’t give you examples since it 100% depends on your installation. Every site is different with different requirements.

If you have a sidebar called “menu” you could add the following shortcode to display a trigger button:

[ocs_trigger id="menu" text="Open menu" element="button"]

More info on the sidebar config options here: https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Shortcodes#ocs_trigger–ocs_triggercontentocs_trigger
There are several examples on this page of shortcode configurations.

Cheers, Jory

• This reply was modified 1 year, 5 months ago by Jory Hogeveen.

so my sidebar is named sidebar1 then the code should be:

[ocs_trigger id=”sidebar1″ text=”Open menu” element=”button”]
I put that in a shortcode box by itself right below it.

When I click it, it does nothing.

This is what it says in the Off-Canvas Sidebars area:
ID & ClassesSidebar ID:?#ocs-sidebar1?? Trigger Classes:?.ocs-toggle-sidebar1.ocs-open-sidebar1.ocs-close-sidebar1

• This reply was modified 1 year, 5 months ago by antdx.

so I think because it’s not connected?

Errors found!

• 1: "website_before" hook is not fired
• 2: "website_after" hook is not fired

Please check your hooks and priorities.

it works : )))))))))))

I had to add to the header and footer phps

<?php do_action('website_before'); ?> 

<?php do_action('website_after'); ?>

Problem is now.. the button doesn’t stay in place?

When scrolling.

It should be a floating and fixed.

• This reply was modified 1 year, 5 months ago by antdx.
• This reply was modified 1 year, 5 months ago by antdx.

ok so I found out what is wrong:

When Enable front-end is checked (for it to work) the Position: Fixed in Edit Button > Advanced does not work anymore. I’ve tested it.

There’s issues such as not being able to have it slide over everything.

It ruins the Elementor Pro code, probably why they didn’t bother with sidebars in the first place but it can be coded in for each page.

I’ve removed it. Unless you are making a basic WordPress Site with a Basic Sidebar, this won’t work.

Hi @antdx

Glad you’ve solved the hooks setup, it was mentioned in the installation documentation. Your theme didn’t include the default hooks? This is quite common nowadays (since WP 5.2 more and more themes adapted).

Anyhow, let me provide some feedback on your comments after that:

Problem is now.. the button doesn’t stay in place? When scrolling. It should be a floating and fixed.

As I mentioned, this plugin doesn’t include any CSS. So if it should be fixed then you will need to add the CSS to make it fixed or include the button in an element that is already fixed.

When Enable front-end is checked (for it to work) the Position: Fixed in Edit Button > Advanced does not work anymore. I’ve tested it.

Enabling the front-end is required for the plugin to work. This option is for experienced JavaScript developers only who want to create their own frontend.

There’s issues such as not being able to have it slide over everything.

It ruins the Elementor Pro code, probably why they didn’t bother with sidebars in the first place but it can be coded in for each page.

I can imagine that there are some modules from Elementor that could have issues with how this plugin works. Like sliders.

However, did you check the compatibility mode for sticky/fixed elements?
https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/fixed-elements

You can find it’s setting in the plugin general settings. While it’s not as smooth on old devices I’ve found that this older use of CSS does fix many issues with elements that are fixed/sticky in the viewport.

I’ve removed it. Unless you are making a basic WordPress Site with a Basic Sidebar, this won’t work.

This plugin is more of a framework than a one-for-all solution. The configuration part is quite important as every theme is vastly different in it’s structure and CSS.
However, it’s compatible or can be made compatible quite easy with most if not all themes.

Since Elementor is a plugin, what theme are you using? Do you perhaps have a public link that I can go to for checking your issue?

Cheers, Jory

The Hello Elementor theme. They don’t have a way to do Sidebars like that for a reason. I just put HTML with .js and some .css to make it work.

The sidebars you guys have is alright if you don’t use Elementor but Elementor makes it super easy to make better webpages as you can drop in HTML, shortcodes, videos, photos, etc. with ease.

I can even do super-easy embeds on it that take up the whole screen.

I even have a forum from another plugin called wpForo. https://isv.social/community

I used to install tons of Elementor add-ons, but then my site crashed, so I had to rebuild. I have a bunch of plugins that do their jobs.

For the sidebar page I was talking about, see https://isv.social/ai

• This reply was modified 1 year, 5 months ago by antdx.
• This reply was modified 1 year, 5 months ago by antdx.
• This reply was modified 1 year, 5 months ago by antdx.