Custom header icons don't show on mobile devices

Shopify Partner
19 0 4

I added two custom icons to my store's header file, and they work just fine on desktop, but when you move to a mobile device they're invisible. In a simulated mobile environment like in the inspect element window, they're visible and work just fine, but as soon as you move to a real phone, BOOM, they're gone. 


site link:, pass: tonythetiger




As you can see, one screenshot (mobile) has only the search icon visible because it's not custom. But the rest of the icons [account, hamburger, a




@PageFly-Richard @GemPages @PageFly-Kate @PageFly-Victor 

Replies 3 (3)

Shopify Partner
593 141 151


Its perfect on mobile



Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .

Shopify Partner
7865 1785 3075

Hi @grimworld 

This is Victor from PageFly - Landing Page Builder App


You can try this code by following these steps: 

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


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

.header__icons, .header__icons svg {

 display: flex !important;




Hope that my solution works for you.

Best regards,

Victor | PageFly

Shopify Partner
5621 1261 1230

Hi @grimworld,


You can check out my suggestion below to get your concern resolved.


1. Go to Edit code on Online Store:




2. add my code  above the </body> tag on Theme.liquid:


@media(max-width: 425px) {
.header-wrapper ..header__icons, .header-wrapper ..header__icons svg {
display: flex !important;






Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center