Solved

Why is the grey background still appearing on mobile Shopify logo?

Karikat
Excursionist
36 4 2

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 

Accepted Solution (1)
Karikat
Excursionist
36 4 2

This is an accepted solution.

I found the solution, thanks for your time 😃

View solution in original post

Replies 17 (17)

oscprofessional
Shopify Partner
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3072

oscprofessional_0-1603881454653.png

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Karikat
Excursionist
36 4 2

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

oscprofessional
Shopify Partner
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Karikat
Excursionist
36 4 2

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?

oscprofessional
Shopify Partner
15830 2369 3072

Clean your mobile browser history then check

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Karikat
Excursionist
36 4 2

I already did, it is still buggy

Karikat
Excursionist
36 4 2

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

 

{% comment %}

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
</button>

{% endcomment %} 

oscprofessional
Shopify Partner
15830 2369 3072

Now Is it showing background or not with search code?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Karikat
Excursionist
36 4 2

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

Karikat
Excursionist
36 4 2

This is an accepted solution.

I found the solution, thanks for your time 😃

austinbenrimon
Tourist
4 0 2

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

steve1231
Visitor
2 0 0

hi anybody solved? 

smokinfiddler
Visitor
1 0 0

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

Gytism11212
Visitor
1 0 1

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

storm3
New Member
7 0 0

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