Logo Centered

[David]

Hi, i get the logo center to work, but i have issue with the mobile version. They is out of line and when i click on the burger menu my logo shows up too. I read some article about logo centered. I use the css and used it the css option in the menu. Also the search icon is center too. How i can remove the search on the mobile version. Or how i can the the logo to the top position. Also when i open the burger menu, how i can remove the logo from them?

Thank you.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

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.

[David]

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

[David]

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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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]

David,

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

Thanks a lot.

[Leo]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Hi Leo,

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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts