Archived topic
Other Menu Button for Offcanvas Menu
20 replies · Started by Benny on June 29, 2021
Hey there, i wondered if there is a solution to make the offcanvas menu slightly different with a button attached to the sliding menu panel like in the image.


on mobile it should look like this

Hi fragbenny,
Yes, it's doable :)
Try to follow the steps below:
1. Go to appearance > elements, create a block element.
2. Add the button with the style you want, I would recommend using Generateblocks > Buttons block, so you can make the corner rounded and add a custom SVG icon to the button.
https://wordpress.org/plugins/generateblocks/
3. If you have the Geneateblocks pro version, you can rotate the button under the effect tab. If not, leave it.
4. Add these 2 CSS classes to button > advanced > addtional CSS classes: slideout-toggle rotate-button.
https://www.screencast.com/t/gD85M7xTkv9
5. Choose entire site as location, choose hookas element type, choose inside-slideout-navigation as hook name.
https://www.screencast.com/t/Ly142YUTRye
6. Add this CSS to customizer > addtional CSS:
.rotate-button.slideout-toggle {
position: absolute;
left: -68px;
transform: rotate(90deg);
top: 30vh;
}
nav#generate-slideout-menu {
overflow: visible;
}
span.menu-bar-item.slideout-toggle {
display: none;
}
Adjust the value after leftand top to re-position the button.
Let me know if this helps :)
Thank you so much. Worked like charm and i found out i was working without generateblocks pro the whole time. I forgot to install it :D
Haha glad I reminded you to install GB pro :)
You are welcome :)
This is broken with the latest gp update. Do you know why?
Hi Fragbenny,
Can you share the link to the site in question?
You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
May we also know in what way it broke?
The menu button disappeared entirely on my own website --> https://hechtinsgefecht.de/
It was working before, so i guess it happend after the latest update.
Hi there,
can you check that GP Premium is still active on the site?
Yes, it is.
I don't see any Navigation or site header element on the site. Have they been disabled ?
Its an overlay that is on the right side. The button is left of it and if i click it, it slides the menu out entirely. But the button is gone, even if i (via webdev console) change the width of the slide panel so that i can see it. Maybe the hook isnt working anymore?
I see. The update shouldn't make a Hook or any Element break. Can you provide admin login credentials so we can take a closer look at the issue?
Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Here we go. You have to change the language though.
PS: The CSS is in a snippet (code snippets), not in the customizer.
Can you try #1 here to debug: https://docs.generatepress.com/article/debugging-tips/
It's recommended to backup your site before proceeding with this.
I can do 1 and 2.
Another theme would make no sense, i have 4096MB Memory and i host it myself on openlitespeed via runcloud/hetzner. I disabled the whole caching already but didnt help.
I will test the other points!