[Support request] Off canvas panel with blocks inside

[Matthias]

Hi there,

as i also would like to create a “sticky contact sidebar” – see this example (orange buttons for mail, phone etc. -> click them to see what i mean) i wonder if i can use gp to achieve something similar.
I already have a solution to make nice looking sticky buttons (thx to this forum)- now i am looking for a way to open an off canvas panel the size of the button bar when clicked on them (again – if you check out the link above and click a few of them you know what i mean).

btw – i used the off canvas panel as mobil menu (overlay) – so i dont know if this can be used again for what i am asking.

[Fernando]

Hi Matthias,

You would need custom code to achieve an off canvas panel menu similar to the one you linked. The level of customization needed to achieve such would be out of our scope of support.

You can create the design through a Block Element, however, you’ll need multiple Javascript codes to make the off canvas panel appear, and also for the tabs changing as you press a button.

The off canvas panel offered by only has one button, and the reference menu has a couple. I believe it would be easier to create from scratch.

Hope this clarifies.

[Matthias]

thank you.
Then another way as you guys know you way around the wordpress world much better then i do:
Do you know any plugins that can help with that?

I know about Off-Canvas Sidebars & Menus
and also found Off Canvas from Plus Block (although the gutenberg versions demo isn’t working for me- while the elementor version does…)

Do you happen to know any other that might do the trick? I probably missed some.

[Fernando]

Not sure about this but perhaps some of these may adhere to your preference: https://bashooka.com/cms/off-canvas-navigation-menu-wordpress-plugins/

Another user suggested this as well: https://generatepress.com/forums/topic/second-off-canvas-menu/#post-2065801

I would also suggest asking in the GeneratePress Facebook group for the best recommendations: https://www.facebook.com/groups/1113359788719597

Hope this helps!

[Matthias]

thx fernando.

I just had a look – the plugin in the 2nd link is nice – but seem to have one “flaw” – it uses its own editor for the sidebar – so i cant use gb. But i will keep this in mind if my next question is answered with no.

I tried around with the slidebar plugin i mentioned above.
I created buttons on the right side of my page (currently positioning and sticky doesn’t work as wanted – but thats something for later) – and also a sidebar which currently can be accessed by a main menu entry (email).

Can i
a) hook an element into that sidebar – and with that use generateblocks to design whatever i want inside?
b) use the buttons (in this case the one with email symbol – they are currently right-sided if you scroll down a little) to open+close the sidebar?
c) would be changing size of the sidebar -but that question is probably always answered with yes

[David]

HI there,

apart from another user requesting a similar thing, we haven’t seen a plugin that can do that.
The most we can offer is the GP Off Canvas Panel.
You can create your won custom trigger to open it – see Tom #3 reply here:

https://generatepress.com/forums/topic/move-hamburger-menu-to-page-header/#post-637453

You will have to think of what you will do on mobile, as enabling the off canvas for mobile replaces the default theme mobile menu….

[Matthias]

not sure if i follow. But i tested some more with the slidebars plugin

The plugins i test out can do what i mean (well probably wordpress can).
1. I created a sidebar (email) -> a widget is created (off canvas: email)
2. I can add content/blocks to that widget -> tested with a gb container, image, headline
3. I can add that sidebar to the menu and open it -> the content can be seen.

So this would leave me with a) answered but b+c i couldnt so far figure out myself:

b) how to use the buttons instead of the menu entry
(in this case the one with email symbol – they are currently right-sided if you scroll down a little) to open+close the sidebar -> currently working with the “Email” in the main menu.
The plugin itself has a line for the sidebar: “sidebar ID: #ocs-email Trigger Classes: .ocs-toggle-email .ocs-open-email .ocs-close-email” but i dont know how to make that work with the button. Add a class to the button – ok. But as i dont know css i guess i have to add some other code also.

c) how to change size of the sidebar.

You are right about the mobile. I have to think of an answer for that. If i remember right in some video the class “hide-on-mobile” was mentioned. This may be one solution- maybe not the best: hide buttons on mobile.

[Ying]

b) how to use the buttons instead of the menu entry

If you are using the plugin for the off canvas menu not the theme off canvas menu, we are not able to help as the function is not provided by the theme. But you can try addocs-toggle-email, ocs-trigger ocs-toggle, ocs-toggle-email class to a button to test.

I’m not sure which class will actually work, it’s better reach out to the plugin support for this.

c) how to change size of the sidebar.

hide-on-mobile

is a theme built in class which you can add to a block to hide it on mobile.

[Author]

Posts