Shopify themes, liquid, logos, and UX
Hi,
I'm using the Dawn 2.0 theme.
https://wortheattt.myshopify.com/
On the header section in the desktop platform, I have my login button:
But on the mobile platform, I don't have the logo button on my header:
Only after clicking the menu sign → the login button is beneath all the menu as you can see in this picture:
How can I add the login button to the header section in the mobile version?
Thanks
Solved! Go to the solution
This is an accepted solution.
sorry for that issue can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
a.header__icon.header__icon--account.link.focus-inset.small-hide {
display: flex !important;
margin-right: -40px;
}
}
This is an accepted solution.
Hi @Ben1000 ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
.header__icon.header__icon--account.link.focus-inset.small-hide {
display: flex !important;
margin-right: -40px;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.
This is an accepted solution.
sorry for that issue can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
a.header__icon.header__icon--account.link.focus-inset.small-hide {
display: flex !important;
margin-right: -40px;
}
}
Hi @KetanKumar @AvadaCommerce I have just used this code and it work but there is too much space between all 3 icons (search, account & basket). Is there anything I can do to make them closer to each other?
many thanks
is this solved ?!
This is an accepted solution.
Hi @Ben1000 ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
.header__icon.header__icon--account.link.focus-inset.small-hide {
display: flex !important;
margin-right: -40px;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.
Hi @AvadaCommerce @KetanKumar,
Thank you it works, I just deleted the code line:
margin-right: -40px;
Because it's above my cart logo.
Hi Ben, Nice to meet you. I meet the same problem with you. Do the same thing like you did, but didn't work. Can you share more details about adding login button. Thank you very much.
can you please share store url
Hi KetanKumar
could you help please, I pasted the code on base.css but still not showing the icon on the mobile.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024