Hi @redingeservice,
I believe we can do that. Go to the Appearance section of your dashboard and click on Customize. In the Additional CSS section, add this CSS snippet.
@media screen and (max-width: 767px) {
.woocommerce-active .site-branding {
width: 100%;
}
img.custom-logo {
margin: 0 auto;
}
}
Publish your changes and see if that will center the logo on mobile for you.
Let me know if you have any trouble,
thank you, worked perfect
Thank you very much. It worked for me also, lol. You guys are Rockstars!
How about centering menu on mobile?
You can center the menu button beneath the logo too. Here’s some CSS for that:
button.menu-toggle {
float: none;
max-width: 100%;
width: 100px;
margin-left: auto;
margin-right: auto;
display: block;
}
You may also want to add a bit of space between the logo and button so they’re further apart. To do that modify the snippet earlier to be like this:
@media screen and (max-width: 767px) {
.woocommerce-active .site-branding {
width: 100%;
margin-bottom: 20px;
}
img.custom-logo {
margin: 0 auto;
}
}
It worked, but it gave me a burger menu on top of menu in desktop view so we took it off. Thank you so much @three Sons! You’re an angel! The CSS for the footer worked great! We still have the vertical bar and period under it, but it’s passable for now. Really appreciate your assistance.
Hey @condadocouple,
You might try moving the menu button style inside the media query.
@media screen and (max-width: 767px) {
.woocommerce-active .site-branding {
width: 100%;
margin-bottom: 20px;
}
img.custom-logo {
margin: 0 auto;
}
button.menu-toggle {
float: none;
max-width: 100%;
width: 100px;
margin-left: auto;
margin-right: auto;
display: block;
}
}
Just a thought 🙂
