Off Canvas menu with custom header element

Hi Sam,

I'm not sure I understand your question.

How do you want the off canvas menu to work with a header element?

Hello Ying,
my apologies,

So I created a header element using a section -> grid -> two blocks: one contains a site logo and a title, and the other one the site's main menu.

I tried to apply the off-canvas functionality to that menu, following the instruction I found on the GP site, but I couldn't get it to work.

Also, right now, I'm using the menu's default mobile-responsive functionality.
It works well on IOS devices, but on Android(Samsung), the hamburger icon (you know, the little two horizontal lines icon) jumps into the page a split second later as if it has some negative margin or something. Is there any way to prevent that horizontal shift?

I tried to apply the off-canvas functionality to that menu, following the instruction I found on the GP site, but I couldn’t get it to work.

Can you link me to the instruction?

It works well on IOS devices, but on Android(Samsung), the hamburger icon (you know, the little two horizontal lines icon) jumps into the page a split second later as if it has some negative margin or something. Is there any way to prevent that horizontal shift?

I think that's controlled by WordPress as the navigation block is a WP core block, can you link me to your site? I can have a look.

I've sent you the details
thank you

Looking at your header layout, I don't think a block element - header is needed.

You can achieve this using customizing options of GP.

thanks

Just let me know if you run into any questions, we can help achieve that.

To move the site tagline under the logo, you can add this CSS:

.site-branding-container {
    flex-direction: column;
}