[Resolved] Mobile Logo Centred

[_blank]

Hi

I’d like to centre my logo and the menu on mobile version.
When I use the code below my logo disappears
I’ve used this code
MOBILE HEADER LOGO CENTRE
*/

#mobile-header .site-logo {
position: absolute;
left: calc( 50% – 150px); /* 50% from the left – half your image width */
}

#mobile-header button.menu-toggle {
position: absolute;
left: 0;
}

Logo is 300px wide
Louise-ODonnell-Ltd-logo-mobile-300px.png

http://ld0001.mackiedesigncompany.com/wp

Also I’d like to centre the menu.
Thanks
Scott

[Leo]

Hi Scott,

Can you try to remove the code you’ve added and just try Disabling the Mobile Header Feature?
https://docs.generatepress.com/article/mobile-header/

Then the logo and menu toggle should both show up in the center.

Let me know.

[_blank]

Hi Leo

Thanks for quick reply!
Yes that worked. They are both centred now.
How can I make the menu drop down text centre aligned?
Thanks
Scott

[Tom]

Give this CSS a shot:

@media (max-width: 768px) {
    .main-navigation .main-nav .sf-menu>li {
        text-align: center;
    }
}

[_blank]

Hi Tom
I gave that a go and added it to WordPress > Customize > Additional CSS
but hasn’t centre aligned it.

http://ld0001.mackiedesigncompany.com/wp/

Thanks
Scott

[Leo]

Hi Scott,

Can you try this CSS instead:

@media (max-width: 768px) {
    .main-navigation .main-nav .menu.sf-menu>li {
        text-align: center !important;
    }
}

Let me know.

[_blank]

Great that work.
Many thanks for your help.
Scott

[Leo]

Glad we could help!

[BeeLady11]

Hi
I’m flummoxed!

I’m building a site: https://www.woking-builders.co.uk and for some reason the logo is off-centre in mobile view. I haven’t got a separate mobile header or anything and I’m probably doing something daft.
Any suggestions?
Thanks!

[Tom]

Hi there,

Try adding this CSS:

@media (max-width: 768px) {
    .header-aligned-left .site-header {
        text-align: center;
    }
}

[BeeLady11]

Hi – sorry, completely forgot this and now it’s reared its head again – the CSS didn’t work and the logo is still on left in mobile view.
Help appreciated.

Tx

[Tom]

Give this a try instead:

@media (max-width: 768px) {
    .site-logo {
        text-align: center;
        display: block;
    }
}

[BeeLady11]

Tx! It worked for that site, but not for another site I’m just putting together, for some reason:

https://patchwork-quilting.co.uk

I tried another way (for others who may encounter this problem):

.site-logo {
…
…
margin: auto;}

– this did centre the logo but the text is not centred on mobile – do you have any suggestions?
Thanks again.

[Tom]

Do you want the text below the logo on mobile?

[BeeLady11]

Hi Tom – yes, I followed another one of your helpful nuggets of information to get the site title, etc looking how I wanted. It’s great on PCs but is slightly off centre on mobile.
Tx

[Author]

Posts