[Resolved] how to make off canvas menu that shows left sidebar

[johnaps]

Hello!

I have tried many things, can you tell me the correct way to make a button of mine that is appearing under 768px to open a offcanvas menu that shows my left sidebar?

https://thefinterest.kinsta.cloud/

Under 768px you will see a button
<button class="offcanvas-flyout-open slideout-toggle">

Can you tell me what i need to do to achieve this?

[David]

Hi there,

i am not sure i understand this:

to open a offcanvas menu that shows my left sidebar

Are you wanting the Themes left sidebar to go off canvas on small devices ? As thats not something the theme can do.

[johnaps]

okay i understood now i had to use off canvas on widget area…

I have 2 problems though!
1.
The only way that the bellow element works is if i activate the offcanvas everywhere (both mobile and desktop)
<button class="offcanvas-flyout-open slideout-toggle">

if i activate it only on mobile it doesnt work!
P.S. I want it only under 768px

2.
inside the off canvas panel there is main-nav which i dont have on my off canvas widgets and i dont want it there!

[David]

The GP Off Canvas was never really designed for this kinda thing, and if enabled for mobile it will replace the default mobile menu. Resulting in a lot of messing with the themes code to get it do that.

I would recommend using a plugin like this:

https://wordpress.org/plugins/off-canvas-sidebars/

It does what you need without all the headaches

[johnaps]

So what is off canvas used for??

In the site of mine i will mention bellow i have used off canvas with sucess to display filters only, without any menu appearing there…
the element that is opening off canvas there under 768px is <span id="mfh" class="slideout-toggle woo-filter-toggle hide-on-mobile">

Thats what i want… and i have it on thefinterest.kinsta.cloud but there is that menu that i dont know why it is there…

[johnaps]

i think i understood what you meant… you cant have off canvas for menu and for filters separately… i will use the plugin… thank you!

[David]

Thats correct the off canvas was built to provide an alternative navigation system ( It used to be called Slideout Navigation ). We do have some future plans for better Off Canvas Features.

Glad to be of help!

[Author]

Posts