How to do the menu as same as this?

Hi there,

1. Customizer > Layout > Off Canvas and enable for desktop and mobile.
2. Create a new Dashboard > Appearance > Menu and assign it to the off canvas.
3. Create another menu that contains no menu items and assign this to the Primary Navigation.
4. Customizer > Layout > Sticky Navigation - enable this.

If you want the menu overlaying the background then you can do this with a Header Element.

Hi there

I don't see off canvas under layout.

GP Premium version is 1.8.3

Do I miss something?

Thanks

Do you have the Menu Plus module activated in Appearance > GeneratePress?

I find it.

I follow the step you gave and I have a few questions.

1、How to create transparent header? Currently,It is white space.

2、How to add MENU text on the left of the sidepanel icon?

Thanks

1. In your Header Element - go to the Site Header tab and select Merge with Site Header, this will also provide you options to change the Navigation colors when the header is merged.

2. Add Menu to desktop toggle:

.sf-menu>li.slideout-toggle:before {
    content: 'MENU';

}
.sf-menu>li.slideout-toggle {
    display: flex;
    align-items: center;
}

2.1 Swap Menu label and toggle on mobile

.menu-toggle:before {
    content: "";
}

.menu-toggle:after {
    content: "\f0c9";
    font-family: GeneratePress;
    width: 1.28571429em;
    text-align: center;
    display: inline-block;
}