Maybe I had 1 beer too many last night but I can’t seem to target the active fa-icon color in the right header menu in the BB-child Theme. Can anyone help please?
Here’s the Nav Label:
<i class=“fa fa-globe fa-fw”></i> Websites
The fa-icon color will change on a:hover but on a:active the fa-icon reverts to the regular anchor link color.
fwiw it works fine on DWB w/BB Pro plugin. I just can’t nail the active fa anchor in the BB-child Theme.
[Maybe I had a beer to few!]
In the screenshot above I’ve styled the fa-icon color :
.fl-page-nav-right .fl-page-nav-wrap a,
.fl-page-nav-right .fl-page-nav-wrap a *,
.fl-page-nav-right .fl-page-nav-wrap a.fa {color:green;}
How do I style the a:active.fa color?
Hey Northumbrian,
Thanks for posting! Do you mind sharing the URL of the site you’re working on so we can check? It would really help if we could see the markup of the page. 
You can use the private reply option below if necessary.
Ben
it’s local but that’s fine.
which of the WP http://server/ entries below do i change to http://public-ip/ for you to see the style sheet? [otherwise you just see an unstyled page and no firebugging!]
if you’d rather RDP I can private you that…
or do i just change both those http://server/ entries above and then change them back when you’ve done checking?
Hey Northumbrian,
Sorry to say but if you’re working locally, I believe there’s no way for us to check that. We don’t do remote support as well. Those icons are the same as texts so their properties should be the same. Have you tried styling .fl-page-nav-right .fl-page-nav-wrap a:active? If it’s part of the link it should work. Unless you styled the icon differently.
Ben
Back…
http://159.203.2.39/learn/
To recap: The fa-icon hovers to green on the menu but I can’t target the a:active fa-icon to green.
Thanks.
Hey Northumbrian,
I did check the site above and it seems the icons are already green in the first place, hovered or not? The selector :active only applies to links already clicked, caching may cause problems when using it. If you want to change the color of the icon for when you are on that specific page, e.g., change the icon color beside Learn when you are on the learn page, try this CSS snippet.
.fl-page-nav-right ul.nav li.current-menu-item a i {
color: blue;
}
Ben
That’s got it - Thanks Ben. You da man!