Hi,
I want to resize my sign-in logo on my mobile Shopify store, as I did with the other icons. How can I do that?
Here is a picture of how it looks at the moment.
Topic summary
Goal: Adjust the sign-in (login) icon on mobile—initially to resize it, later to hide it on mobile and show it only inside the mobile drawer (menu).
Key steps and suggestions:
- Helper asked for store URL and password; user eventually provided access to preview.
- Initial guidance: add a CSS media query in Online store → Settings → Custom CSS to target the relevant class. Generic example given didn’t work without the exact selector.
- User shifted requirement: hide the login icon on mobile and display it in the drawer. Helper noted adding it to the drawer requires theme code edits and collaborator access.
Issues encountered:
- Provided CSS hid the brand logo (.header__heading-logo) on mobile, not the login icon.
- After clarification, helper supplied CSS targeting “.header__icon.header__icon–cart.link.focus-inset” to hide the element on mobile. That selector corresponds to the cart icon, not the login icon, so it likely doesn’t address the login icon.
Artifacts: Multiple screenshots were shared to illustrate icon placement.
Status: Unresolved. Correct mobile selector for the login icon not confirmed; moving toward theme code changes for drawer placement with collaborator access.
Hi,
What’s your store url ?
Can you share the password so that i can preview the store.
Is there any option you could tell me the specific code without me telling you the password? I don’t want to put it out here on this platform.
I cannot view the class or id used in your logo without viewing your site. In order to resize the logo, you will need to implement some CSS code. You can try this and make sure to write the actual class name
Go to you online store → settings → custom css
and paste this code there
@media only screen and (max-width: 768px) {
.class-name {
width: 150px; /* Adjust the width for mobile screens */
height: auto; /* Maintain aspect ratio */
}
}
That doesn’t work. Do you know how to just display the icon when I use the desktop version and display the sign-in on mobile only in the drawer?
Without viewing the site it’s not possible for me to do that.
The password is: aifrao
You want to hide the logo in mobile view right ?
Yes! but I want to display it in the drawer, if that is possible
Go TO YOUR ONLINE STORE → SETTING → CUSTOM CSS AND PASTE THIS CODE THERE
@media only screen and (max-width: 767px) {
.header__heading-logo {
display: none;
}
}
THIS WILL HIDE LOGO ON MOBILE VIEW
IF YOU WANT TO VIEW LOGO INSIDE THE DRAWER ON MOBILE VIEW I NEED COLLABORATOR ACCESS TO YOUR STORE BECAUSE TO ADD LOGO IN DRAWER I NEED TO EDIT YOUR THEME CODE
When I add this code, the only thing that disappears is the logo of my brand.
IF YOU WANT TO VIEW LOGO INSIDE THE DRAWER ON MOBILE VIEW I NEED COLLABORATOR ACCESS TO YOUR STORE BECAUSE TO ADD LOGO IN DRAWER I NEED TO EDIT YOUR THEME CODE
Yes, I understand that! What I am saying is when I apply the code in the Custom CSS, my brand logo disappears. I want the login logo to disappear. Here is a picture to better explain it to you! Can you modify the code so the login logo disappears instead?
If you want to hide login logo you need to write this code instead
@media only screen and (max-width: 767px) {
.header__icon.header__icon--cart.link.focus-inset {
display: none !important;
}
}
If you want to hide login logo you need to write this code innstead
@media only screen and (max-width: 767px) {
.header__icon.header__icon--cart.link.focus-inset {
display: none !important;
}
}