Archived topic

Centering logo on mobile header

5 replies · Started by pcdoctoratl on February 27, 2022

Viewing posts 1–6 of 6

February 27, 2022 at 3:52 pm #2135866

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!

February 27, 2022 at 4:10 pm #2135872

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

February 27, 2022 at 4:31 pm #2135881

Thank you, that solved it!

February 27, 2022 at 5:04 pm #2135921

No problem :)

November 23, 2022 at 8:33 pm #2430272

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

November 23, 2022 at 8:54 pm #2430289

Hi Cynthia,

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

Hope to hear from you soon.

This archived topic is closed to new replies.

Start building better websites today.