Solved

Login Icon Missing On Mobile View Shopify

DavidLeong
Tourist
26 0 2

Need help to set the missing login icon on mobile view for Shopify Theme > Stockmart. Referred to the past discussion and tried some of the guided code fix but none works for the theme. Anyone can help?

 

My website is www.mobilecablestore.com

 

Greatly appreciated. Thank you!

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

Go to your Online store > Themes > Edit code > open base.css file, add this code at the bottom of your file and save

.header__account {
    display: inline-flex !important;
}

Screenshot_6.jpg

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

Awesome. Anything else I can assist you with?

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 17 (17)

theycallmemakka
Shopify Partner
1375 305 334

Hi @DavidLeong ,

 

I reviewed the site and found that the login icon/button is currently inside hamburger menu. I also reviewed the theme  and found that this this doesnot provide login icon on the header of mobile version.

 

If you want to add the icon on the top menu, you will have to custom code on the template files.

makkaomakka_1-1699197253323.png

 

makkaomakka_0-1699197243722.png

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

DavidLeong
Tourist
26 0 2

Yes, would need further help to optimize this function. Kindly assist. Thank you

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

Go to your Online store > Themes > Edit code > open base.css file, add this code at the bottom of your file and save

.header__account {
    display: inline-flex !important;
}

Screenshot_6.jpg

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

DavidLeong
Tourist
26 0 2

Aha, it works! Tqvm! Have a good day ahead! Cheers!

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

You are always welcome. @DavidLeong 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

DavidLeong
Tourist
26 0 2

Possible to help further. Upon adding this, the header icon on Home page and other pages are no longer center aligned. Anything that I can do further to fix this?

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Hi @DavidLeong 

Please add this code to check

@media screen and (max-width: 767px) {
.header__top-inner h1.header__heading, .header__top-inner .header__heading-link {
    margin: 0 auto !important;
}
}

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

DavidLeong
Tourist
26 0 2

It is still not center, i think it is measuring the center in between hamburger and the login icon

Home Mobile View.png

DavidLeong
Tourist
26 0 2

I tried using this code below: but it seems to work only on Home Page and not the other pages

 

@media screen and (max-width: 767px){

h1.header__heading, .header__heading-link {

margin-left: 13px !important;

}

}

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Update your code to this 

@media screen and (max-width: 767px){
h1.header__heading, .header__heading-link, .header__top-inner .header__heading-link {
margin-left: 13px !important;
}
}

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

DavidLeong
Tourist
26 0 2

i am sorry, i am still encountering the same. It works good and center aligned for Home Page only. Once i clicked into other pages, it is slightly aligned to the left. 

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Your code is applied but it cannot make logo in center

Screenshot 2023-11-06 at 10.48.39.png

Please remove your code to make it appear in center 

Screenshot 2023-11-06 at 10.49.52.png

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

DavidLeong
Tourist
26 0 2

If i remove the code, the center alignment will be in between the hamburger and the login icon. 

 

It is not center alignment in between the page width.

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Try to update code to this and check again 

@media screen and (max-width: 767px){
.header__top-inner h1.header__heading, .header__heading-link, .header__top-inner .header__heading-link {
margin-right: -12px !important;
}
}

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

DavidLeong
Tourist
26 0 2

It works now! tqvm but i need to put 0px instead 

 

@media screen and (max-width: 767px){
.header__top-inner h1.header__heading, .header__heading-link, .header__top-inner .header__heading-link {
margin-right: -0px !important;
}
}

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

Awesome. Anything else I can assist you with?

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Theodor
Navigator
497 67 75

Hi @DavidLeong ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Login Icon Missing On Mobile View Shopify, let’s try this solution:

Online Store ->Theme ->Edit code->theme.liquid

 

<style>
.header__account {
    display: inline-flex !important;
}
</style>


I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.