- This topic has 17 replies, 4 voices, and was last updated 5 years, 9 months ago by Tom.
-
AuthorPosts
-
March 27, 2017 at 7:33 am #297948_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.pnghttp://ld0001.mackiedesigncompany.com/wp
Also I’d like to centre the menu.
Thanks
ScottMarch 27, 2017 at 7:38 am #297952LeoStaffCustomer SupportHi 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.
March 27, 2017 at 7:46 am #297956_blankHi 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
ScottMarch 27, 2017 at 9:42 am #298004TomLead DeveloperLead DeveloperGive this CSS a shot:
@media (max-width: 768px) { .main-navigation .main-nav .sf-menu>li { text-align: center; } }
March 28, 2017 at 2:41 pm #298661_blankHi 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
ScottMarch 28, 2017 at 2:47 pm #298664LeoStaffCustomer SupportHi 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.
March 29, 2017 at 1:08 am #298808_blankGreat that work.
Many thanks for your help.
ScottMarch 29, 2017 at 7:28 am #298911LeoStaffCustomer SupportGlad we could help!
May 1, 2018 at 11:36 am #564848BeeLady11Hi
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!May 1, 2018 at 9:28 pm #565102TomLead DeveloperLead DeveloperHi there,
Try adding this CSS:
@media (max-width: 768px) { .header-aligned-left .site-header { text-align: center; } }
July 23, 2018 at 10:49 am #630867BeeLady11Hi – 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
July 23, 2018 at 7:17 pm #631133TomLead DeveloperLead DeveloperGive this a try instead:
@media (max-width: 768px) { .site-logo { text-align: center; display: block; } }
July 24, 2018 at 8:41 am #631636BeeLady11Tx! 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.July 24, 2018 at 7:24 pm #632049TomLead DeveloperLead DeveloperDo you want the text below the logo on mobile?
July 25, 2018 at 5:28 am #632334BeeLady11Hi 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 -
AuthorPosts
- You must be logged in to reply to this topic.