Header and Footer Template element for same Offcanvas?

Hey Brick’s Family,

Anyone successfully use the same template offcanvas element for their header and footer? If so, how do you structure it to work between both if using the same toggle selector class?

We have a nested menu in the header with a toggle to open .“offcanvas-nav” and then in the footer a toggle to retrieve the same offcanvas but the footer toggle does not seem to want to work since the template is stored in the header.

Any advice on this one?

Can you make the off canvus in a pop up template and set conditions to available everywhere instead of it being elements inside the header template? And then just have the same element in the header and footer that calls the off canvas pop up?

Yes, I think you and I are on the same thought process :wink:

I saved the offcanvas as a template: “Offcanvas-Nav” with class .offcanvas-nav.

Then added to the footer template, a template element for the offcanvas template.

Then for any triggers on the website, just use the template’s class “.offcanvas-nav” and it works great! This way, the offcanvas template is loaded on any pages and is available to be called from a toggle in header, body or footer. Works great so far! I’ll send a link once we push this live from local.