Account icon not visible on mobile in expanse theme

Store Design
,

Topic summary

A user reported that the account icon was not displaying on mobile devices in the Expanse theme, despite being visible on desktop.

Solutions Proposed:

Multiple contributors offered CSS and JavaScript fixes:

  • CSS approach: Adding specific media query code to the theme.css file to force display the account icon on smaller screens (max-width: 768px)
  • JavaScript approach: Inserting code in theme.liquid file above the </body> tag

Resolution:

After some trial and error with different code placements, the issue was resolved. The user confirmed success with one of the provided solutions, specifically the CSS code targeting .site-nav__link.site-nav__link--small-hide with display: block !important; added to the bottom of the theme.css file.

The discussion included screenshots demonstrating the implementation steps and code placement locations.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hi

The account icon is not visible on mobile though its visible on desktop

My theme is expanse

Store url www.astheygrow.in

2

Hey @ragsmax

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Moeed_0-1687863164953.png
Moeed_0-1687863164953.png264×475 64.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @ragsmax

Its Artzen Technologies! We will be happy to help you today.

Artzen_tech_0-1687862955216.png
Artzen_tech_0-1687862955216.png1233×624 69.4 KB

Use this CSS in your css file

@media only screen and (max-width: 768px)
#SiteHeader .site-nav .small--hide {
    display: block!important;
}
}

Let me know if need further assistance
Regards,
Artzen Technologies

4

Sir,i have added your code to the bottom of the theme.css.liquid file..still no result

5

no sir its not working

6

Artzen_tech_0-1687864180959.png
Artzen_tech_0-1687864180959.png1227×639 76.3 KB

7

i have to add this to the bottom of the theme .css file ?

@media only screen and (max-width: 768px)
#SiteHeader .site-nav .small--hide {
    display: block!important;
}
}
8

add this code theme.liquid in the bottom of the file above tag.

9

Hello @ragsmax

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.site-nav__link.site-nav__link--icon.small--hide {
    display: block !important;
}
1 Like
10

i just did this. Its sill not working. Can u collaborate with me?

11

Artzen_tech_0-1687864931434.png
Artzen_tech_0-1687864931434.png1047×591 22 KB

that code paste here

12

wow thank u this worked

1 Like