Simple social icons not displaying in right header

[laucocos]

Hello everyone,

I have set up the simple social icons on the right side header, sidebar and footer on my website https://staging2.staging.inspiratti.com/ The social icons are working fine on the footer and sidebar, but have completely disappeared from the header.

Note, I've set up a custom widget area for the right header where the social icons display. The widget area seems to be working as I tested it using a search bar, text box, etc which all showed fine.

Your help would be much appreciated.

Many thanks,
Laura

https://staging2.staging.inspiratti.com/

[AnitaC]

Hi Laura, the site needs a password. But check the social icons widget to see what colors the fonts are set at.

---

Need help with customization or troubleshooting? Reach out to me.

[laucocos]

Hi Anita,

I've unlocked the site so you can access it without a password.

Below is the css code I used to style the social icons for the header:
.site-header .simple-social-icons a svg[class^="social-"] {
color: #ffffff;
}

.site-header .simple-social-icons a:hover svg[class^="social-"] {
color: #00539a;
}

.front-page .white .site-header .simple-social-icons a svg[class^="social-"],
.white .site-header .simple-social-icons a svg[class^="social-"] {
color: #1f1f1f;
}

.front-page .white .site-header .simple-social-icons a:hover svg[class^="social-"] {
color: #00539a;
}

Many thanks,
Laura

[laucocos]

Just to clarify, the above css code is already in the style.css file but the social icons are still not showing. It therefore seems there is another issue here.

[AnitaC]

Somewhere in a custom.css file is this code that is hiding the icons.

.site-header .simple-social-icons {
    display: none;
}

I see the custom.css in a file folder under the client name/css/custom.css.

---

Need help with customization or troubleshooting? Reach out to me.

[laucocos]

Hi Anita,

That's solved it - thank you so much for your help.

Best wishes,
Laura

[Author]

Posts