Repositioning logo on mobile view

Store Design
, , ,

Topic summary

A user is experiencing logo positioning issues on mobile after moving the search icon to the left side of the logo, causing overlap.

Initial Problem:

  • Logo set to ‘center’ in theme editor but overlaps with repositioned search icon
  • Standard left alignment moves logo further left instead of centering it
  • User also wants to adjust spacing between icons for more logo room

Attempted Solutions:

  • Initial CSS suggestions using .logo selector with margin-left or transform: translateX didn’t work
  • User identified correct element as header__heading-logo-wrapper and successfully applied the CSS
  • Modified code to target mobile view only

Remaining Issue:

  • Logo doesn’t shrink from center during scroll with the ‘logo size reducing’ effect active
  • Thread remains open with user seeking solution for the scroll behavior
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’ve managed to move the search icon from the right hand side of the logo to the left on mobile, the only problem is that it now overlaps the logo. How do I centre the logo? Bearing in mind that in the theme editor the logo is currently set to ‘center’ and aligning left moves it further left than it already is.

Screenshot 2025-04-05 at 16.51.48.png
Screenshot 2025-04-05 at 16.51.48.png2278×2446 632 KB

I would also like to consider adjusting the space between the icons to allow more room for the logo.

1 Like
2

Hey, I think I can solve this issue. Since the logo is already set to ‘center’ in the theme editor, let’s try adding some custom CSS to give it some extra room.

Can you try adding the following code to your CSS:

logo { margin-left: 20px

or

.logo { transform: translateX(20px

This should nudge the logo a bit to the right, creating some space between it and the search icon.

3

Hi, thanks for responding. Unfortunately neither of them work as ‘logo’ is not a recognised element. However I used inspector to find the element which is called ‘header__heading-logo-wrapper’, and the rest of your code worked with this. Unfortunately this adjusts the alignment on the desktop as well as mobile, when I only need this for the mobile appearance.

4

I’ve changed the coding so that only the mobile is affected. Annoyingly, with the ‘logo size reducing’ effect I have when scrolling, the logo does not shrink from the center. Any ideas?