Why is my logo still showing a grey background on mobile?

Store Design

Topic summary

Issue: A Shopify store logo shows a grey background on mobile despite a desktop fix. The merchant added CSS (.site-header__logo-image { background-color: #fff !important; }) which resolved desktop but not mobile.

Key context: The problem appeared after commenting out the search icon in header.liquid using Liquid comments ({% comment %}…{% endcomment %}), which disables code in Shopify templates. After this change, the logo background turned grey on both desktop and mobile; the CSS fix only affected desktop.

Troubleshooting: A helper could not reproduce the grey background on their devices and suggested clearing mobile browser history/cache, which did not help. The original poster later said they found a solution but did not share details.

Community update: A later participant posted a working fix for similar cases: .site-header__logo-image { background: transparent !important; animation: none !important; }. Another user confirmed this resolved the issue when other solutions did not.

Status: Partially resolved. The OP’s exact fix is unknown, but a community-provided CSS (transparent background and disabling animation) is reported to work. Code snippets are central; screenshots were shared but not essential to the outcome.

Summarized with AI on February 9. AI used: gpt-5.
1

I have pasted this code on theme.css

.site-header__logo-image {background-color: #fff !important;}

its fixed on desktop but it is still showing the grey background on mobile

https://gyazo.com/5c028f5baf2d4d1797f7189f27ab5c88

2

Hello…
Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

3

screenshot: https://gyazo.com/de3360d502b4ea7e5cc4795023a431e9?token=ac9b7048fe35e9de975dfda7bd5a7ad6

4

oscprofessional_0-1603881454653.png
oscprofessional_0-1603881454653.png1808×848 180 KB

I did not see any gray background here pls check again..

5

when I have it on my browser, mobile view it isnt there but on my mobile device it is still showing =(

6

Even I have checked in mobile device.. it is fine.

7

I let my friend check, he has the same problem

on my 2 mobile devices i have the same problem aswell

I dont know why its showing on some devices and on other devices it doesnt.

can anyone help me here please?

8

Clean your mobile browser history then check

9

I already did, it is still buggy

10

the problem came when I added {% comment %}, {% endcomment %} in header.liquid to remove the search icon, maybe that was the problem?

{% comment %}

{% include 'icon-search' %} {{ 'layout.navigation.search' | t }}

{% endcomment %}

11

Now Is it showing background or not with search code?

12

when I removed the search icon the background turned grey on desktop and mobile view, then I added the

site-header__logo-image {background-color: #fff !important;}

on theme.css to get rid of the background but it kept showing the grey background on mobile

13

I found the solution, thanks for your time :smiley:

14

Can you share what your solution was? Having this exact issue.

1 Like
15

hi anybody solved?

16

Do you mind sharing what fixed your issue? I’m having a similar one.

17

.site-header__logo-image { background: transparent!Important; animation: none!important; }

1 Like
18

THIS WORKS IV LOOKED AT TWENTY PLUS THIS IS THE ONLY ONE THAT WORKS