move hamburger menu to the left and display website title in the middle

I tried through Layout > Header > switching Branding to “Site title” instead of “logo”

Do this again. Then add this CSS:

#mobile-header .navigation-branding {
    margin-left: auto;
}

Remove this CSS:

.mobile-header-navigation.has-menu-bar-items .mobile-header-logo {
    margin-left: auto;
}

Thank you, Ying!

You are welcome :)