Repositioning logo on mobile view

[PathoStudio]

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.

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

[Sparksolution]

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.

[PathoStudio]

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.

[PathoStudio]

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?