How can I shift my logo to the left on a mobile header?

Store Design
1

Hi there,

I’m trying to move my logo to the left on mobile header but when I use margin-left, on smaller devices it covers the hamburger icon!

What am I doing wrong?

www.babeology.co.uk

Thankyou!

1 Like
2

@Esquibb96

do you mean like this?

KetanKumar_0-1603970382011.png
KetanKumar_0-1603970382011.png1920×1080 401 KB

3

Indeed however I’d like to keep the hamburger to the left also, and just have the logo next to it, but if that’s not possible then that will do!

4

@Esquibb96

Thanks for feedback

if possible to share screenshot how do you like exactly so i will provide code

1 Like
5

Like this :slightly_smiling_face:

Thanks so much for your help, I really appreciate it!

Screenshot 2020-10-29 at 11.54.54.png
Screenshot 2020-10-29 at 11.54.54.png2880×1800 942 KB

6

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
@media (max-width: 767px){
    .header-item--left{
    max-width: 20px !important;
    margin-right: 10px !important;
}

}

You can change the 10px value to anything you wish.
The greater the value, the more to the right it will be pushed.

Please let me know whether it works.

Kind regards,
Diego

7

That worked! Thankyou!

8

@Esquibb96

I’m glad to hear that!

Next time feel free to contact me personally, I’ll be happy to help.

Kind regards,
Diego

9

Hey Diego,

I’m having trouble doing this same thing on my site. I have the “Taste” theme and i’m just looking to move my logo to the left on mobile, remove search and bring hamburger to top right.

Everything on Desktop is fine as is.. except for the search feature.

10

Would you mind sending the code to achieve this?

11

Hey there! Thanks for the info. I did this, but it didn’t work. My logo is still in the middle. And interferes with the search bar