Why did my cart and search icons disappear from my header?

[Josh993]

Hi there,

I'll start by saying the paid theme I'm using "Effortless" Is extremely buggy and I couldn't recommend it to anyone but now that I'm already using it I'll have to keep going with it for some more months. 

My Cart and search icons in my header have disappeared after changing header layout and now they won't come back even when I return it to the original layout (I have not messed with code so its a theme bug for sure). Can someone help me to get these icons displayed again? It's killing my store design and conversion rate has dropped because of it. 

https://loyaldoggo.com

Thank you very much. 

Josh

[GemPages · Accepted solution]

Hello @Josh993 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your assets/base.css  theme file.

3. Add the code at the end of the file:

.header-item.header__icons *{
  fill: #000000 !important;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[Ujjaval · Accepted solution]

@Josh993 
Add below css into base.css file (Online store->themes->Edit code->Assets->base.css)

.header__icons svg path {
    fill: skyblue;
}

[Rahul3F · Accepted solution]

Please added the css and Solve the issue

header.css

Line No 229

.header__icons svg path {
fill: #000 !important;
}

Thanks

[GemPages · Accepted solution]

@Josh993 

Please put one more time my code gives you to the bottom of the file . it will apply all device

[GemPages · Accepted solution]

Hello @Josh993 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your assets/base.css  theme file.

3. Add the code at the end of the file:

.header-item.header__icons *{
  fill: #000000 !important;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[Josh993]

Thank you very much! 🙂 I appreciate it 

[Josh993]

I've just noticed it doesn't display on mobile devices though, still only appears as dots where the cart icons should be 

[GemPages]

@Josh993 

I see you give css code just for desktop
you can add it back at the end of the file

[Josh993]

I don't know how to do that unfortunately.

Is there a way i can give mobile css code for help? 

[GemPages · Accepted solution]

@Josh993 

Please put one more time my code gives you to the bottom of the file . it will apply all device

[GemPages]

@Josh993 

Or you can move the code as shown:

[Josh993]

Thank you very much! It worked! I had the code before the }} first time. Great work!!

[GemPages]

@Josh993 

I am so glad that suggestion solution can help.

[Rahul3F · Accepted solution]

Please added the css and Solve the mobile devices issue

@media only screen and (max-width: 992px) and (min-width: 320px) {
.header__icons svg path {
fill: #000 !important;
}
}

[TufayelAhmed]

I can't find (base.css) in my theme. What can I do now? Kindly provide a solution.

[Ujjaval · Accepted solution]

@Josh993 
Add below css into base.css file (Online store->themes->Edit code->Assets->base.css)

.header__icons svg path {
    fill: skyblue;
}

[Josh993]

Thank you very much for telling me how to do this!! It's a great help and more than I asked for 🙂

[Rahul3F · Accepted solution]

Please added the css and Solve the issue

header.css

Line No 229

.header__icons svg path {
fill: #000 !important;
}

Thanks

[Josh993]

Thank you for showing me how! It worked well 🙂