Login account icon in header mobile

[NinoB97]

 
Hello i cant seem to get the login / account icon in my header, i enabled the option in settings and it shows on the desktop version but not on mobile, i tried some css codes from previous posts but it didnt fix my problem, can someone look at the website and see what’s exactly wrong? Thanks in advance! 

www.auraliving.nl

[BSSCommerce-HDL · Accepted solution]

hi @NinoB97, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
@media only screen and (max-width: 749px) {
    .header__icon.header__icon--account.small-hide {
        display: flex !important;
    }
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Guleria]

Hello @NinoB97 ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: block !important; 
    height: 2.5rem !important;
    width: auto !important;
}

Thanks

[BSSCommerce-HDL · Accepted solution]

hi @NinoB97, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
@media only screen and (max-width: 749px) {
    .header__icon.header__icon--account.small-hide {
        display: flex !important;
    }
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B · Accepted solution]

HI @NinoB97 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
    .header__icon.header__icon--account.small-hide {
        display: flex !important;
    }
}

 Step 3: Save your code and reload this page.

The result will be: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!