[Resolved] Centering logo on mobile header

[pcdoctoratl]

I’v tried different css and haven’t been able to get the logo centered on the mobile header. I’ve probably messed something up and hope you all could help. Thanks so much!

[Leo]

Hi there,

Try this:

.site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
}
.main-navigation.has-branding .menu-toggle {
    margin-left: auto;
}

[pcdoctoratl]

Thank you, that solved it!

[Leo]

No problem 🙂

[Cynthia]

Ref. November 24, 2022 at 3:28 pm #2431967

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

[Fernando]

Hi Cynthia,

I see. Can you start a new topic for assistance?

Hope to hear from you soon.

[Author]

Posts