New Menu

Hi there,

For the ‘Menu’ part, you can use a button block to trigger the menu to open when clicked. Here’s a topic that has a similar use case to yours.
https://generatepress.com/forums/topic/open-off-canvas-panel-using-icon-or-button-link/

Hi there,

the Buttons icon field would need to include 2 x SVGs for the icon.
One for the Open state and one for the close state eg,

<svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z"></path></svg>
<svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path></svg>

We can then use some CSS to show hide the relevant icon based on the off canvas menu state.

body.slide-opened .gb-button.menu-toggle svg:first-of-type, 
body:not(.slide-opened) .gb-button.menu-toggle svg:last-of-type {
    display: none;
}

The slide-opened class gets toggled on the root HTML element,
So the class is present when the off canvas is open, and we hide the relevant SVG based on that class state

1. go to customizer > layout > off canvas panel, and set it to on, instead ofmobile only.

2. add slideout-toggle and has-svg-icon class to the container, remove the menu-toggle class.

3. add this CSS to hide the slide out button on desktop:

span.menu-bar-item.slideout-toggle {
    display:none;
}

Let me know how it goes 🙂

No Problem 🙂