Custom header icons don't show on mobile devices

grimworld
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: https://grimlabs.co, pass: tonythetiger

 

 

grimworld_3-1677101464422.png

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

grimworld_2-1677101446719.png

 

 

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

Replies 3 (3)

infoatcodelab7
Shopify Partner
593 141 151

@grimworld 

Its perfect on mobile

infoatcodelab7_0-1677131640903.png

 

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com

PageFly-Victor
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

GemPages
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:

 

GemPages_0-1678865534750.png

 

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

 

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

 

Eg:

 

GemPages_1-1678865743444.png

 

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