Site logo

Archived topic

Other Menu Button for Offcanvas Menu

20 replies · Started by Benny on June 29, 2021

Viewing posts 1–15 of 21

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?

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?

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

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

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!

This archived topic is closed to new replies.