colors for icons dont show on safari

Highlighted
Excursionist
37 0 6

hello ive edited the code to show one color (white) on the homepage and turn another (blue) on all other pages I have it worked on android and chrome but if I put the site up on safari on mac or ios the menu changes but the other icons don't here is site 

https://the-salami-chip-co.myshopify.com/

 

the code 

}
/* if the theme has this...*/
.site-header__burger-menu div.icon-burger div.row {
    background-color: #00C6FF; /* light blue */
}
/* then you could ovverride that only on the homepage by prepending the .template-index class */
.template-index .site-header__burger-menu div.icon-burger div.row {
    background-color: #ffffff; /* white */
}
.header-meta svg path {
    color: #00C6FF;
}
/* override for the homepage */
.template-index .header-meta svg path {
    color:  #ffffff;
}

 

the results currently on safari and ios (both chrome and safari)

 

IMG_A9C73E3655FA-1.jpeg]

but on chrome on android or pc

Screen Shot 2020-10-17 at 12.14.27 PM.png

 

thanks in advance!!!

0 Likes
Highlighted
Shopify Partner
60 6 15

Well, you'll inspect it the same way you inspect chrome:

Screen Shot 2020-10-18 at 2.49.10 PM.png
Looks like svg has limited support in safari
https://caniuse.com/?search=svg 
have you tried adding a webkit prefix?

Highlighted
Shopify Partner
60 6 15

it looks like safari doesn't like having a style on path, and prefers to set fill and stroke on svg. You would probably want to combine this with a browser prefix to ensure it's only read in on safari, and you will want to scope it appropriately to specify the elements you want to address. 

svg.icon{
fill:red;
stroke:red;
}


Screen Shot 2020-10-18 at 3.01.59 PM.png

Highlighted
Excursionist
37 0 6

 

 

Is this it? And I would add this to the theme.scss.liquid right under code I have now or delete and replace with this I'm confused sorry not very good at coding 

 

-webkit-
svg.icon{
fill:blue;
stroke:white;
}

 

 

0 Likes
Highlighted
Shopify Partner
60 6 15

Looks promising. Did you try it? What was the result? Curious, because I'm not sure. I had to google it.  There's a lot of documentation apparently.

Don't forget that you can try these yourself using the inspection panels on desktops (the issue with safari isn't just mobile, but on desktop as well, and the how to is in that video I showed you in the last thread ). Doing it that way, you don't have to edit your CSS until you know you like the result.

None of us are actually "very good at coding" these days, we're better at using IDE's, googling, copypasta because there's a lot of usable examples out there. In the hiring process, I used to challenge candidates to write a specific javascript function using just pen and paper, but it became clear it was a worthless test–some of the best I've worked with couldn't do it without leaning on something.


Highlighted
Excursionist
37 0 6

no change sadly

 

0 Likes
Highlighted
Shopify Partner
60 6 15

hey, try this

.template-index .header-meta svg path {
color: #ffffff;
fill: #ffffff;
stroke: black;
-webkit-fill: #ffffff;
-webkit-stroke: black;
}

I don't know why I didn't notice you put your prefix on the selector, rather than in front of each attribute 

0 Likes