[Resolved] Other Menu Button for Offcanvas Menu

[Benny]

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

[Ying]

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 🙂

[Benny]

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 😀

[Ying]

Haha glad I reminded you to install GB pro 🙂

You are welcome 🙂

[Benny]

This is broken with the latest gp update. Do you know why?

[Fernando]

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?

[Benny]

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.

[David]

Hi there,

can you check that GP Premium is still active on the site?

[Benny]

Yes, it is.

[David]

I don’t see any Navigation or site header element on the site. Have they been disabled ?

[Benny]

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?

[Fernando]

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

[Benny]

Here we go. You have to change the language though.

PS: The CSS is in a snippet (code snippets), not in the customizer.

[Fernando]

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.

[Benny]

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!

[Author]

Posts