Mobile Menu Position

Hi there,

wrap the CSS for centering the logo in a media query so it only applies to desktop:

https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

Then use this CSS to force the logo to center. The transform property is offsetting the toggle icon size ( 50% of its width )

.site-logo.mobile-header-logo {
    margin-left: auto !important;
    transform: translateX(36px);
}

Thanks David - any ideas how I can get the logo to sit in the center on the sticky navigation on desktop...

http://185.20.51.60/~ianbrewittdecora/

Try this CSS - it would also work as a replacement to the other CSS if the Navigation as Header option is selected ( where going to update the Centered logo documentation to cover this soon):

.navigation-branding {
    position: absolute;
    left: 50%;
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
    margin-left: 0;
    z-index: 1;
}

.main-navigation .menu-item-separator a {
    font-size: 0;
    background: transparent !important;
}

.main-navigation:not(.slideout-navigation) .main-nav {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: auto;
    margin-right: auto;
}

.main-navigation ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main-navigation ul li.menu-item-separator {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

Perfect, Thanks David

Glad to be of help