Topic: Centering Logo mobile header

YEAR93
October 25, 2024 at 2:56 pm
Hello,

I would like to center my logo in the header on mobile using custom CSS:
```
	.site-logo  {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-left: auto;
	}
```
Everything appears correctly until the mobile dropdown menu is opened; at that point, the logo becomes misaligned. Please see the attached screenshot for reference. How can I resolve this?
Ying
October 25, 2024 at 4:06 pm

Hi there,

You didn’t define a top value.

Add top:22px; to your css.
YEAR93
October 25, 2024 at 7:43 pm

Thank you. How did you calculate the top value? In case I’m changing to logo or it’s size in the future.
David
October 26, 2024 at 3:30 am

Hi there,

most likely by eye.

Had the top = 0 the logo would have aligned to the very top of the header, which has 20px of padding.
So top = 20 would have placed inside the padded area, the extra 2px would have been Yings eye for detail 🙂
YEAR93
November 6, 2024 at 12:54 am

Thank you!
David
November 6, 2024 at 4:48 am

You’re welcome
YEAR93
November 7, 2024 at 2:39 am

I noticed one more thing. After centering the logo with custom CSS (tablet and mobile view), the logo has become harder to click. I’m not sure why, but it seems the clickable area of the logo has shrunk, making it unresponsive at times. Do you know what might be causing this?
David
November 7, 2024 at 7:28 am
Try adding this additional CSS:
```
.site-logo {
    z-index: 1000;
}
```
It will make sure the logo sits in front of the navigation
YEAR93
November 7, 2024 at 9:18 am

Perfect, that did the job. Thank you!
David
November 8, 2024 at 4:27 am

Glad to hear that

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Centering Logo mobile header