Archived topic
center the header logo on mobile
3 replies · Started by Cynthia on November 24, 2022
I am trying to center the mobile header logo also but when I use the CSS use provided #2135872 above, then my logo size becomes very small which I don’t want. I would like the size to remain as it is, I just want to center it. It is currently on the left in mobile view.
I’m using this CSS currently:
.navigation-branding img, .site-logo.mobile-header-logo img{
width:300px;
height:auto;
margin-bottom:20px;
margin-top:30px
}
I currently have mobile header set to ON
Hi there,
Try this CSS:
.site-logo.mobile-header-logo {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}Hi Leo
The css you provide does center the logo, but it reduces the size of it too way small so I adjusted the css I already had there and added on the "left: 10%;" and it moved the logo while retaining the size I wanted it. I preferred css that would be isometrical but I will just use this tweak for now.
.navigation-branding img, .site-logo.mobile-header-logo img{
width:300px;
height:auto;
margin-bottom:20px;
margin-top:30px;
left: 10%;
}
Sounds good.
