Archived topic
Trying to replicate layout of social icons below navigation on side header
5 replies · Started by Adam on November 24, 2018
Hello,
I am replicating the Avada website i've linked below using generatepress. So far so good, I am able to use the "sider" template website by generatepress to get a similar layout.
But I am wanting to add the 3 social media icons below the navigation menu items. I don't really want to add them using the menu items because that doesn't seem like the easiest method in this case. I am wondering about the best way to accomplish inserting them like that, perhaps editing the PHP that is generated within the header to include the html below the navigation panel?
Thank you for your help and expertise.
Hi there,
The Sider site is set up so that sidebar is actually your header.
So you can add a widget with your social icons into the "Header" widget area in "Appearance > Widgets".
Let me know if you need more info :)
Hey Tom,
Yes that is a great point, that will work well.
One more question please; when I am styling the icons I would like them to change color during the hover state as well as maybe change the background color of the font awesome icon.
How would I target that with CSS? Would I put a class on the anchor tag or the icon tag or both?
For example: <a class= "icons-social-link" href="www.facebook.com"><i class="icons-social fab fa-facebook-f"></i></a>
Thank you for your help,
Hi there,
I would add the class to the a tag only. Then you can do something like this:
a.icons-social-link:hover {
color: #fff;
background-color: #000;
}Hey David,
That works great, thanks a lot for your help!
Awesome, glad to be of help
