Add Tab to Off Canvas Panel

Hi Michael,

Sounds like you've known how to do it, you can choose generate_after_header as hook name, then use CSS to make the button fixed to somewhere on your site.

Any specific difficulties you ran into?

Let me know :)

Hi Ying! Well, I got part of the way. I created a block - hook and assigned it to the header hook. Then we applied the following styles:

/* A-Z Button Tab for Slideout */
.gb-button-wrapper-f95deb72 {
	justify-content: flex-end;
}
a.gb-button-2a2a07be {
	position:fixed;
	margin-top:190px;
	z-index: 5000;
}

But I'm not sure how to make the tab react as if it was attached to the edge of the off canvas panel instead of how it behaves currently simple stuck to the side of the browser window. I'd like the A-Z button tab to move with the slide out. Any ideas would be very much appreciated as always 🙂. I've included a link below.

Hi Michael,

Can you specify which part of the off-canvas panel you want it to attach on?

Also, can you confirm if the link provided is the correct link? I've tried checking the site and it didn't seem to be using off-canvas menu panel. Let us know. :D

Hi Elvin,

I would like the tab to behave like it is attached to the off-canvas panel similar to this mockup. Yep, I'll put the link in again. Look for the red A-Z tab on the right side of the browser window. Let me know if it doesn't work.

Can you try this CSS:

.gb-button.slideout-toggle {
    position: fixed;
    top: 190px;
    right: 0;
    z-index: 999999;
    transition: all 0.2s ease;
}

body.slide-opened .gb-button.slideout-toggle{
    right: 325px;
}

Instead of this:

/* A-Z Button Tab for Slideout */
.gb-button-wrapper-f95deb72 {
	justify-content: flex-end;
}
a.gb-button-2a2a07be {
	position:fixed;
	margin-top:190px;
	z-index: 5000;
}

Let me know :)

Works great Ying! Thank you all for your expertise! It is much appreciated.

You are welcome :)

Glad to help!