Liquid, JavaScript, themes, sales channels
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
Solved! Go to the solution
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;
}
}
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;
}
}
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
what theme you are using?? option might be already in theme go to online store -> customize -> select header scroll down
Hi there thank. you for your answer,
we are using the debut theme, could you help us?
Best regards!
Hi and thank you for your reply!
We will send you the information privately.
With best regards!
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;
}
}
It worked, thank you very much for your time and effort to help us, we are very grateful!
Kindly feel free to get back to me if you need any further assistance Thanks!
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
Thank you for offering me further help, could you please read my last answer? Thanks a lot!
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;
}
}
Many Thanks! Everything works fine now. Thank you again for taking the time
User | RANK |
---|---|
23 | |
20 | |
12 | |
12 | |
10 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023