Off canvas menu design

Hi there,

it requires some CSS to do that - if you have the site ready, share a link to it so i can see the layout and i can provide the CSS.

hi David,
i have it on Local. I wanted to know if i am missing something with the settings. ok i will give it a try with CSS myself, i will let you know if i don't make it.
Please share some forum topic that resembles this, i couldn't find some similar.
thanks

hi,
i think i managed :)
For the community:

@media screen and (max-width: 768px) {
.site-logo.mobile-header-logo {
order: 2;
margin: auto;
}
.menu-bar-items {order:3;}
.main-navigation.has-branding .menu-toggle, .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
order: 1;
}
.mobile-menu{display:none;}
}

It will vary depending on the layout.
For example you could do this:

1. Disable the Navigation Search in Customizer > Layout > Primary nav.
1.1 Remove the Mobile Menu Label text
BOTH The above are optional
2. Enable the Mobile header and add mobile header logo in Customizer > Layout > Header

Now you should have Logo (left ) Cart | Hamburger (Right )

3. Add this CSS:

#mobile-header .menu-toggle {
    order: -1;
}
.mobile-header-navigation .site-logo {
    margin-left: auto;
}

Glad to hear you found a method :)