What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Center logo on mobile devices

Solved

How can I center my online shop logo on mobile devices?

Anonymshop
Explorer
82 0 17

Hello there and thank you for reading!

What bothers me the whole time about my online shop is that the logo on mobile devices is too big and not placed in the middle.
Can someone please help me?

I would be very grateful!!!

Thank you for your time!

Best regards

Accepted Solutions (2)
ZestardTech
Shopify Partner
5912 1067 1413

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.logo-align--left .site-header__logo {
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
header.site-header.border-bottom.logo--left {
padding-top: 6px;
}

.logo-align--left .site-header__logo a.site-header__logo-image img {
max-width: 110px !important;
}

div#PageContainer {
padding-top: 60px;
}
.site-header__icons .site-header__icon.site-header__menu.js-mobile-nav-toggle {
position: absolute;
left: 0;
}

.grid__item.site-header__icons,
.grid__item.site-header__icons .site-header__icons-wrapper {
position: unset;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

ZestardTech
Shopify Partner
5912 1067 1413

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.logo-align--left .site-header__logo{
z-index: -1;
}

.site-header__icons .btn--link.site-header__icon.site-header__search-toggle {
position: absolute;
left: 42px;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 11 (11)

ZestardTech
Shopify Partner
5912 1067 1413

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Anonymshop
Explorer
82 0 17

Hi and thank you for your reply!

We will send you the information privately.

With best regards!

ZestardTech
Shopify Partner
5912 1067 1413

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.logo-align--left .site-header__logo {
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
header.site-header.border-bottom.logo--left {
padding-top: 6px;
}

.logo-align--left .site-header__logo a.site-header__logo-image img {
max-width: 110px !important;
}

div#PageContainer {
padding-top: 60px;
}
.site-header__icons .site-header__icon.site-header__menu.js-mobile-nav-toggle {
position: absolute;
left: 0;
}

.grid__item.site-header__icons,
.grid__item.site-header__icons .site-header__icons-wrapper {
position: unset;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Anonymshop
Explorer
82 0 17

It worked, thank you very much for your time and effort to help us, we are very grateful!

ZestardTech
Shopify Partner
5912 1067 1413

Kindly feel free to get back to me if you need any further assistance Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Anonymshop
Explorer
82 0 17

Thank you for offering me further help, could you please read my last answer? Thanks a lot!

Anonymshop
Explorer
82 0 17

Unfortunately, I just realized that there was a problem.

The search function (magnifying glass) no longer works ...

Could you perhaps have a look and if you also have the option, move it to the left next to the menu?

Thank you for your time, best regards

ZestardTech
Shopify Partner
5912 1067 1413

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.logo-align--left .site-header__logo{
z-index: -1;
}

.site-header__icons .btn--link.site-header__icon.site-header__search-toggle {
position: absolute;
left: 42px;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Anonymshop
Explorer
82 0 17

Many Thanks! Everything works fine now. Thank you again for taking the time

renus
Shopify Partner
192 16 30

what theme you are using?? option might be already in theme go to online store -> customize -> select header scroll down

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on renusharma7@gmail.com regarding any help
Shopify Expert | Skype : renusharma99
Anonymshop
Explorer
82 0 17

Hi there thank. you for your answer,

we are using the debut theme, could you help us?

Best regards!