Solved

Why is the logo covering the hamburger icon on mobile in Shopify?

Esquibb96
Excursionist
31 0 4

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!

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 10 (10)

KetanKumar
Shopify Partner
36839 3635 11972

@Esquibb96 

do you mean like this?

KetanKumar_0-1603970382011.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Esquibb96
Excursionist
31 0 4

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!

KetanKumar
Shopify Partner
36839 3635 11972

@Esquibb96 

Thanks for feedback 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Esquibb96
Excursionist
31 0 4

Like this 🙂 

 

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

Screenshot 2020-10-29 at 11.54.54.png

 

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Esquibb96
Excursionist
31 0 4

That worked! Thankyou!

diego_ezfy
Shopify Partner
2935 562 883

@Esquibb96 

I'm glad to hear that!

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

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

thefeelbar
Tourist
36 0 1

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.

anuardu
Visitor
1 0 0

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

thefeelbar
Tourist
36 0 1

Would you mind sending the code to achieve this?