Spacious Navigation with centered Logo

Hi Felix,

You will need some CSS to make the logo center.

You can give this CSS a try:

.site-branding {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

If it doesn't work, I'll have to see your site, maybe create a staging site.

Let me know!

Hey Ying,

first of all... thanks for your quick reply and sorry for the late answer. :)
unfortunatly it doesnt work like it should. Maybe you could have another look. thx

Hi there,

as you want the hamburger on the desktop view, could you go to Customizer > Layout > Header and:

1. enable the Mobile Header.
2. Add the Mobile Header Logo

This will ensure we have a consistent HTML layout for both desktop and mobile.
Let me know once its done and ill work on the center logo.

Hey David,

i have set it up. There is a screenshot what i would like to build on the home page.

CSS via Simple Custom CSS and JS Plugin.

Thank you.

One more thing.
Go to Customizer > Layout > Primary Navigation and in the Mobile Menu Breakpoint field type in 10000

Let me know

check :)

Try this CSS:

#mobile-header.main-navigation.has-branding .menu-toggle {
    order: -1;
}
#mobile-header.main-navigation .menu-bar-items {
    flex-grow: 0;
}
#mobile-header .site-logo {
    margin: auto;
    max-width: 200px;
}

For the icons - do you have SVGs for those ?

yes. perfect.
is it possible to make this header sticky?

In Customizer > Layout > Header, you can enable the Sticky Mobile Header