Hi, I’ve tried a couple of solutions but none work. My logo seems to be centred between the icons in the header and not the page width. How could I fix that?
shop is boops.co.uk, password is krismatt
Thanks!
Topic summary
A user is experiencing an issue where their store logo appears centered between header icons rather than centered across the full page width in mobile view.
Proposed Solutions:
Two community members provided similar CSS-based fixes:
- Add custom CSS code to the theme.liquid file (above the
</body>tag) - The code targets mobile header alignment using media queries
Remaining Concerns:
The original poster questions whether there’s a more responsive solution, noting:
- The pixel-width fix may not work when rotating the phone to landscape
- The logo loses center alignment in tablet view
- They’re interested in potentially moving the logo left and the menu drawer right as an alternative approach
Status: The discussion remains open, with the user seeking a more flexible, device-agnostic solution rather than fixed-width CSS adjustments.
Hey @Boops_1
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @Boops_1
Kindly, follow the below steps to fix your problem:
- From your Shopify admin dashboard, Go to Online Store
- Choose the theme which you wanna edit and click on Edit Code
- Add this code in the end of theme. liquid file above
Result:
If I was able to help you and my solution worked well for then, please don’t forget to Like it and Mark it as Solution.
Best Regards,
Aatiqa
Thanks both. Is there a slicker fix as opposed to fixing at a specific pixel width? For example if I turn the phone sideways or view in tablet it’s no longer centred.
Or is there a way to move it to the left and have the menu drawer on the right?