Custom header layout

Hi George,

Try this for the smaller screens:

@media(max-width: 350px) { 
.inside-header.grid-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

nav#mobile-menu-control-wrapper {
    margin-left: 0;
}

nav#mobile-menu-control-wrapper {
    flex-direction: column;
}
}

Can you try adding this snippet first?:

add_action( 'wp', function() {
$settings = wp_parse_args(
			get_option( 'generate_menu_plus_settings', array() ),
			generate_menu_plus_get_defaults()
		);
	
if ( 'desktop' == $settings['slideout_menu'] || 'both' == $settings['slideout_menu'] ) {
	remove_action( 'generate_menu_bar_items', 'generate_do_off_canvas_toggle_button', 15 );
	add_action( 'generate_before_logo', 'generate_do_off_canvas_toggle_button' );
}
}, 20 );

Let us know how it goes.

Hi there,

my approach would be:

1. remove any snippets or CSS related to the nav.
2. add the logo to the Site Identity.
3. Customizer > Layout > Header, enable the Navigation as Header.
4. Customizer > Layout > Off Canvas, enable it for Mobile
5. Customizer > Layout > Primary Navigation:
5.1 Set the Mobile Menu Break point to a real high value eg. 10000
5.2 enable the navigation search,

At this point you will have across all devices Logo —> Search / Hamburger.

Now add this CSS, adjusting the breakpoints to suit:

@media(min-width: 420px) {
   #site-navigation .menu-toggle {
    order: -1;
    } 
}
@media(max-width: 419px) {
    #site-navigation .inside-navigation {
        flex-direction: column;
    }
    #site-navigation .navigation-branding {
        margin-inline: auto;
    }
}

Glad to be of help