[Resolved] center the header logo on mobile

[Cynthia]

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

[Leo]

Hi there,

Try this CSS:

.site-logo.mobile-header-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

[Cynthia]

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

[Leo]

Sounds good.

[Author]

Posts