Off canvas panel with mobile menu, also using split header hook

Hi there,

Not too sure what you mean. Do you want the logo centered on mobile?

Let me know :)

Sorry It was late when I sent that looking back it doesn't make much sense. So I want to create a header something like this: https://www.gainsboroughwharf.com/

I used the tutorial here to split the header in three, made the logo in the middle and the social icon to the left all fine but I'm struggling with how to get the mobile burger menu into the right header widget area, still keeping the off-canvas panel - do you have any suggestions?

I'd also like to center the logo on mobile but when I do that using the code I found in another tutorial, the content goes directly underneath it, maybe I need to adjust some settings though.

Hope that's more clear?

I'm seeing a centered logo with the off canvas toggle on the far right. I'm not seeing any icons on the far left, though?

To center it on mobile, try this:

.site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#mobile-header .menu-toggle {
    margin-left: auto;
}

Hiya again, apologies, I undid what I had done because it wasn't working but will put it back up now so you can see, then you'll hopefully be able to see what I mean? Also, the shortcode widgets were working before and now they seem to be not working, hope you can help?

Thanks

The columns seem to be working, but the widgets aren't. You're using a widget shortcode, so I'm assuming you installed a plugin to make that work? Can you make sure that plugin is still active?

Hiya, I have sorted the widget shortcode plugin, so now you can see what I mean - I'd like the menu in the top right to be the off canvas panel burger menu, rather than a usual menu. is there a way to do this? I have off canvas panel set up before on the usual header.

I'm seeing the off canvas panel toggle at the top right of the screen right now. Did you get this sorted?

Let me know :)

I'm using responsive menu plugin at the moment and just keeping the right side of the element empty, however, i'd prefer if I could use the generatepress menu and overlay as i much prefer it, can you recommend a way?

It should be possible.

In your third header section, add this:

<?php if ( function_exists( 'generate_navigation_position' ) ) {
    generate_navigation_position();
} ?>

Make sure "Execute PHP" is checked, and that you have a menu applied to the primary menu location in "Appearance > Menus".