Re: icons appearing black on ipad version only

icons appearing black on ipad version only

vfp1
Tourist
17 0 1

Hello all! 

 

I've managed to achieve the white text/logo on a transparent background for the home page only. When i look at the ipad view however, the hamburger menu and shopping back icons are black. Attaching photos of what it looks like. I would like all white on the home page only! Any advice?

 

my url is vintageforpeoples.com.

 

desktop:

desktop menu.png

 

mobile:

mobile menu.png

 

ipad:

ipad menu save.png

Replies 7 (7)

AnneLuo
Shopify Partner
775 149 164

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  .header-wrapper * {
     color: white !important;
  }
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

vfp1
Tourist
17 0 1

hi! it worked but it also made the icons white across the whole website which makes them invisible throughout the site

AnneLuo
Shopify Partner
775 149 164

Please change the code and try again.

<style>
  .header-wrapper .menu-drawer-container .header__icons svg path,
  .header-wrapper .header__icon svg path{
     color: white !important;
  }
</style>
If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

vfp1
Tourist
17 0 1

Hi anne,

 

It worked, but again, makes the icons white on the other pages when i need them to be black.

AnneLuo
Shopify Partner
775 149 164

Oh, so you want it to be white on the homepage. That requires modifying the theme code. I can help you directly modify it.
So I need to access your store as a collaborator if possible. 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

INA_MSWEB
Shopify Partner
1250 143 159

Hello,

 

I am San from MS Web Designer.

 

Here is the solution:

 

Insert the following code:

 

.header-wrapper .icon{color:#fff !important}

 

Do let me know if you need any assistance.

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

vfp1
Tourist
17 0 1

where should I insert it? It didn't work under base.css or theme.liquid above </head>