Logo Centered

Hi there,

Try this:

.toggled .site-logo {
    display: none;
}

#mobile-header .menu-item-separator {
    display: none !important;
}

If you want your logo to display, you can try this:

.toggled .site-logo {
    top: 0;
}

However, it may not have room.

Let me know :)

Thanks Tom,

it is working, but my main logo is still over the menu.

Maybe you can add the option to be logo center for the next big Theme/Premium Plugin update. I appreciated your help. You do a awesome job.

I love your Theme/Plugin.

The logo is gone on the burger menu, but still the main logo is overwriting the menu.
Can we fix that?

And one more thing on the desktop view, i have a space in the floating menu.

Hi there,

looking at mobile - i see two things:

1. The logo is too large to fit between hamburger and search/cart icons. Maybe a smaller logo for the Mobile Header would fix that ?

2. The Search icon is currently behind the Logo. You need to edit this CSS and remove the margin property i commented below:

#mobile-header .mobile-bar-items {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    margin-left: auto; /* Remove this */
}

And then add this:

#mobile-header .mobile-bar-items:not(.wc-mobile-cart-items) {
    margin-left: auto;
}

Thanks David for your support,

but it was not working. Still the same issue. I used a smaller logo, but it stretch out and looks bad quality. Search/cart doesn't changed.

Ok now add this CSS - that should move the search icon.

#mobile-header .mobile-bar-items.wc-mobile-cart-items {
    margin-left: unset;
}

And then this CSS:

#mobile-header .site-logo.mobile-header-logo img {
    width: 200px;
    height: auto;
}

Adjust the width property to suit

Yes David,

it is working. Thanks for your awesome support. I like to have to logo more in the top, but i can life with them.

Last open thing what i have, how i can fix the gap between "grill" and "shop" on the desktop version floating menu? I have a to much space between.

David,

i added css and it works `.main-navigation .menu-item-separator a {
font-size: 0;
background: transparent !important;
display: none;
}`

Thanks a lot.

Just took a quick look and doesn't look like the CSS is actually doing anything.

What happens if you remove that CSS and also the menu item text "Menu" for the separator item?

Hi Leo,

for me it is working fine. Where you saw a issue?

When I remove your CSS above using browser inspect, the spacing looks exactly the same except the text Menu is showing:
https://www.screencast.com/t/E1XfMvYvn

So I figure you could just remove the menu label text and save the CSS.

Maybe I'm missing something though.

When I remove the menu label, i can't save the separator. I was following your description:
https://docs.generatepress.com/article/centering-logo-navigation/

I guess for now it works for me.

To all thank you very much for your support.

No problem :)