Hover problems with social buttons in navigation bar

[brazeau]

Hi. I'm using the Outreach theme. I have a landing page enabled, but you can see the site at: modernfirefighter.com/535353

I've added social button icons to my main nav menu as links and they show up fine, but I have two problems with them. First problem, when I hover over them, they disappear/white out. What can I do to fix this so they hover like the other menu items or don't change at all on hover?

The second problem is their responsiveness. When I shrink my screen, they look funky. Any help with that would be appreciated, as well.

I added the icons under: appearance > menu > link. I also enabled the "CSS Classes" in the "Screen Options" tab at the top of the "Menu" page.

Here is the basic code I added to my css for each of the icons I added.

/*Linkedin Icon */

.menu-linkedin {
text-indent: -9999px;
background-image: url(images/linkedin.png) !important;
background-repeat: no-repeat !important;
margin-left: 10px !important;
width: 50px;
}

.menu-linkedin a:hover {
background: #f5f5f5 !important;
}

Any help is appreciated!

Brad

http://modernfirefighter.com/535353

[emasai]

You are mixing up a lot of things. You have a background image on a li tag and the hover state (which is almost white) on an a tag. So the a tag is doing its job and displaying a white background on hover.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[brazeau]

Ok, thanks. I'm new to this, so are there any easy adjustments you or anyone else can suggest?

Thanks.

[Author]

Posts