menu on the mobile to the left of the logo

Hi there,

1. go to Customizer > Layout > Header
1.1 ativate the Mobile Header and add a Mobile Logo

2. add this CSS to your site:

nav.main-navigation.has-branding .menu-toggle {
    order: -1;
    margin-left: 0;
}
.main-navigation .navigation-branding {
    margin-inline: auto;
}

You can ignore the warning beside the margin-inline the CSS Parser that WP uses in the customizer is old, and own’t recognise a lot of modern CSS properties.

The logo is too large for the mobile header on smaller screens hence the alignment stacks.

Options:

1. make the mobile logo smaller with some CSS:

#mobile-header .mobile-header-logo img {
    height: 50px;
}

OR use a smaller logo for mobile.

2. remove the Mobile Menu label from Customizer > Layout > Primary Navigation so it only displays the icon.

You’re welcome