[callyarndtParticipant]

Hello,

Please visit my page that I am having issues with at http://www.adventurerig.com/contact (home= http://www.adventurerig.com)
I am running WP 4.3.1, X Theme version 2.6 (Renew), and Shortcode plugin version 2.5.0

The issue I am having is that I am using icons on my contact page. Some of the icons already change when hovered over by a mouse (from blue to black). For some reason the Instagram icon and Youtube Icon do not. I am using regular icons not social icons (not sure if this makes a difference).

I have been searching around and trying things for the last few hours but can not find a solution to my problem exactly so I thought I would ask the question on here. I know similar questions have been asked on the forum but I cannot find an answer to resolve my issue.

Thanks so much for the help!! I’m sure what has taken me hours to try and figure out, you guys will have a solution in seconds.

[Rue NelModerator]

Hello There,

Thanks for writing in!

Upon checking in your page, it turns out that the Instagram and Youtube icons has an inline css color: #72addb;. This is the reason why the color doesn’t change when you hover it. We also notice that you have another set of custom css in the customizer.

i.x-icon-instagram {
    color: #6d6f71;
    text-decoration: none;
}

To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.entry-content.content .x-icon.x-icon-instagram,
.entry-content.content .x-icon.x-icon-youtube-square {
    color: #72addb !important;
    -webkit-transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
    transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
}

.entry-content.content .x-icon.x-icon-instagram:hover,
.entry-content.content .x-icon.x-icon-youtube-square:hover {
    color: #000 !important;
    -webkit-transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
    transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
}

We would loved to know if this has work for you. Thank you.

[callyarndtParticipant]

Thank you so much for the response. It did indeed work!

I appreciate the amazing support so quickly.

[ThaiModerator]

Glad it worked 🙂

If you need anything else, please let us know.

[Author]

Posts