Login Icon Missing On Mobile View Shopify

[DavidLeong]

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!

[theycallmemakka]

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.

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

[DavidLeong]

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

[Dan-From-Ryviu]

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;
}

[DavidLeong]

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

[PageFly-Theodor]

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

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

[Dan-From-Ryviu]

You are always welcome. @DavidLeong

[DavidLeong]

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]

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;
}
}

[DavidLeong]

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

[DavidLeong]

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]

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;
}
}

[DavidLeong]

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]

Your code is applied but it cannot make logo in center

Please remove your code to make it appear in center

[DavidLeong]

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]

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;
}
}

[DavidLeong]

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]

Awesome. Anything else I can assist you with?