icons appearing black on ipad version only

[vfp1]

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:

mobile:

ipad:

[AnneLuo]

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!

[vfp1]

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

[AnneLuo]

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>

[vfp1]

Hi anne,

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

[AnneLuo]

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. 

[INA_MSWEB]

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

[vfp1]

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