Simple Social Icons not working correctly

Here is the code area to change the color of the icon background:

.simple-social-icons ul li a, .simple-social-icons ul li a:hover, .simple-social-icons ul li a:focus {
    background-color: #7343ef !important;
    border-radius: 4px;
    color: #ffffff !important;
    border: 0px #ffffff solid !important;
    font-size: 20px;
    padding: 10px;
}

The blue (as I did in the above, make them “pop out” in the footer. Just a preference I have. You can use any contrast color, like light grey by using a different color in the “background-color” section.

@pwedgar Is it possible to create a temporary login so I can take a quick look? Maybe I can find out what’s causing the issue by looking at your Widgets/Admin.

Update: Now the icons WILL NOT work! Changed computers. Worked without issue on my laptop and switching to desktop, the icons are static.

However, as soon as I launch “inspect element” to view code, the icons begin to work. Closing the “inspect element” tool then the icons no longer work.

Maybe an issue with the .js fade up? Not sure.

Yep I’m just now getting back to it…I’ve been working on other Customer/Client sites as well.

I do have a fix for this, but first – Do you plan to add more widgets or content on the homepage? If so, that will instantly fix it. If you plan to leave it exactly as it is with just the 1 background image and then the 3 footer widgets then we’ll have to make a small adjustment. Before I make any adjustments I’ll wait on your reply first. Just let me know how you plan to have the homepage setup.

Hopefully I can explain this without making it sound too difficult. Basically there’s Javascript code that works on the Homepage to make the first Front Page 1 widget/Image area scale/adjust and fit the entire screen. As you adjust the browser size and look at the height of this widget area, you’ll notice the height ratio adjusts (in the code). The height can show up around 950+ px depending on the browser size. Once that happens, if the height exceeds beyond where the social media links are currently located, then they won’t be clickable. Think of it as a hidden invisible layer that covers from the very top of the Front Page 1 all the way down to just under the widget area (about 950px+ from top to bottom).

Look at where you see the Blue Background – http://i.imgur.com/RwIEIeA.png

Everywhere you see blue is what the Front Page 1 widget covers when the Javascript is active.

When you disable the javascript and manually add Padding to the top and bottom (which means it won’t adjust to the screen, it’s a fixed size) this is what it looks like – http://i.imgur.com/CrXqQUi.png

In the second image, the links are clickable because there’s no hidden layer on top of them.

You can remove the javascript by commenting out or removing the home.js link in the front-page.php file….or you can remove the fp1 class in the front-page-1 widget area in the front-page.php file to get rid of the javascript.

Other users haven’t ran into this issue because they are most likely using more than 1 widget on the homepage. So if you want to fix this without messing with any of the code then you can simply add another widget to the homepage and it should fix itself.

You’re Welcome! Make sure and send me a link once you get the site completed. We can add it to the showcase/forum and share it on Social Media.