Convert button click to open Off-Canvas

[sterlinghealan]

Building a header. Would like a custom button on my header to open the Off-Canvas I have set up. How do I do this? I do not want to use the default Off-Canvas toggle button.

Thanks

[prakash_s]

Hello @sterlinghealan,

Thanks for writing to us.

I would suggest you please add a Button element and an Off-Canvas element. Now you need to inspect the Off Canvas element through the browser inspector.

<div class="x-anchor x-anchor-toggle has-graphic e1841-e17 m1f5-v m1f5-x" tabindex="0" data-x-toggle="1" data-x-toggleable="e1841-e17" data-x-toggle-overlay="1" aria-controls="e1841-e17-off-canvas" aria-expanded="false" aria-haspopup="true" aria-label="Toggle Off Canvas Content"><div class="x-anchor-content"><span class="x-graphic" aria-hidden="true">
<span class="x-toggle x-toggle-burger x-graphic-child x-graphic-toggle" aria-hidden="true">

  
<span class="x-toggle-burger-bun-t" data-x-toggle-anim="x-bun-t-1"></span>
<span class="x-toggle-burger-patty" data-x-toggle-anim="x-patty-1"></span>
<span class="x-toggle-burger-bun-b" data-x-toggle-anim="x-bun-b-1"></span>

  
</span></span></div></div>

And that’s the only thing we need to open the Off-canvas using the button. To do that, please do the following details.

data-x-toggleable = “e1841-e17”
aria-controls=“e1841-e17-off-canvas”
data-x-toggle-overlay=“1”
data-x-toggle=“1”

Go to the button and add these custom attributes

Hope it helps
Thanks