Archived topic
Header logo not aligned in center
7 replies · Started by casey on August 2, 2021
Hello,
the logo on my homepage is not centered but every other page is. I did set up a separate header for my homepage by using the elements method. Another thing to note is that when you go on the homepage and either rotate the screen back and forth, the logo re-centers. Or if you expand the menu and close it again. Either way, how do I fix this so the logo loads centered?
Here's a screenshot of what I'm talking about: https://www.dropbox.com/s/23gvvytd3tftcpw/Photo%202021-08-02%2C%205%2054%2053%20PM.png?dl=0
Here's my homepage: https://truthaboutfluoride.com/
And here's the CSS I have that may be effecting this:
.site-logo.mobile-header-logo {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin-left: auto;
}
#mobile-header .menu-toggle {
order: -1;
margin-right: auto;
font-sHi there,
The second block of your CSS looks incomplete: font-s
I'm actually seeing it centered:
https://www.screencast.com/t/CNlLIlksrMcH
If you are still having the issue, can you make sure your browser cache is cleared and your plugin cache is cleared and disabled for now?
My bad, here's the full code:
`.site-logo.mobile-header-logo {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin-left: auto;
}
#mobile-header .menu-toggle {
order: -1;
margin-right: auto;
font-size: 20px;
}
The thing is, if you use "Inspect" it will be centered. It's not centered when you go on a real phone.
And yup, no problem. Did what you asked.
Hi Casey,
I checked on my phone (Android - Chrome - Redmi Note 9s) and the logo is centered.
On your phone, can you try viewing the page in incognito/inprivate mode and check if it's still the same on your end?
Hey Elvin,
it's kind of odd sometimes it's fine, other times it's not.
I just did what you asked and it did the same thing the first time I checked. Here's a screenshot:
I used private mode and used Safari.
Weird. That code looks good to me.
Can you clear and disable your caching plugin?
the problem does not seem to happen when I turn it off (still did not turn it off).
How do I make it work with cache on?
How do I make it work with cache on?
Make sure you clear/purge the plugin's cache, server's page cache(if any) and CDN cache (if any).
And clear your device's browser cache as well. :)
