Hello,
I’m re-developing a website for my employer using Newspaper 8.8. We’re both very pleased with the theme thus far. Most issues I’ve come across I’ve been able to deal with on my own via various forum and web searches. This one is more of an “OCD nag” than an issue, but I would like to do it to increase visibility. The built in social links for menus are great, but my employer needed two FB Page links, and a network not listed. Considered and tried multiple options. Fastest way to do that was Custom Links from Appearance > Menus, and use Font Awesome icons. Okay, things are good.
Now I want each social link to have a custom hover color. That is what I need help with.
Here is the “Live Link” for Local by Flywheel: dc4eb874.ngrok.io
I’d prefer something I can add to the “Custom CSS” area in Newspaper’s theme options. Any help is appreciated.
Hi,
Each menu item has a unique ID, so you could use that and create a code. I did it like this, first I have added an icon in my menu same way you did
– https://www.screencast.com/t/atJw6weOwj
The menu item ID can be seen with the browser inspector
– https://www.screencast.com/t/0vVSEOThr
So a code like this will change the color when on default (if you want to do that), also set a hover color
– https://www.screencast.com/t/6C5dK406DS
– https://www.screencast.com/t/mWocLAsrZNdZ
This is the code used in the example, you would only need to use the IDs you have. The colors can be set to what you like. Use them both or just the hover one.
.menu-item-3512 .fa {
color: blue;
}
.menu-item-3512 .fa:hover {
color: red;
}
CSS code can be entered in Theme panel->Custom code-> CSS section.
A guide that may be helpful here
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks
Hello, thank you for responding. The following didn’t work
.menu-item-3512 .fa:hover { color: red; }
.menu-item-3512 .fa:hover { color: #66cc3; }
a:hover .fa-couch .menu-item-105 { color: #66cc33; }
a:hover .fa-couch .menu-item-105 { color: #6c3; }
a:hover .fa-couch .menu-item-105 { color: red; }
and multiple other variations.
These DO Work:
a:hover .fa-couch { color: #6c3; }
a:hover .fa-couch { color: #66cc33; }
And this for general color:
.fa-couch { color: #6c3; }
.fa-couch { color: #66cc33; }
Doesn’t help if someone wanted to use the same Font Awesome glyph in multiple site areas, each with a different general/hover/active/visited color though.
The code you provided looks like it should’ve worked, not understanding why it didn’t.
Hi,
You are supposed to use the ID of your own menu item, not the ID with which I tested on my end. The IDs are unique, so most likely my menu item ID will not work for you.
Using the ID the code will apply only for the menu item, the other codes you mention are more general and may affect other instances of the icons.
Thanks
Yes, the first two examples I used my own menu item id, just copied/paste here in a rush.
Yes, the “solution” is general, I’m now asking why it can’t be drilled down to my menu items (doesn’t work). Thanks.
Hi,
It should work like that, right click and inspect the menu item in question, in this case the icon
– https://www.screencast.com/t/bwy0jli6g8
If those are the only icons in the header menu, you could also restrict the code to apply only in the menu
– https://www.screencast.com/t/EPQve1fLnk5
.td-header-main-menu .fa {
color: yellow;
}
.td-header-main-menu .fa:hover {
color: red;
}
There might be other solutions as well.
