How to Create Overlapping Footer Social Icons in Divi
Welcome to part 2 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.
This tutorial walks you through “How to Create Overlapping Footer Social Icons in Divi.” I’ve used this method on several of my designs including: (shown in tutorial)
Here’s the CSS I used:
/*----------Custom Footer Icons----------*/
#footer-info {
float: none;
padding-bottom: 10px;
color: #666;
text-align: center;
}
#footer-bottom .et-social-icons {
float: none;
text-align: center;
margin-top: -32px;
margin-bottom: 15px;
}
#footer-bottom .et-social-icon a {
display: inline-block;
position: relative;
color: #fff;
font-size: 20px;
text-align: center;
text-decoration: none;
transition: color .3s ease 0s;
background: #171717;
padding: 8px;
border-radius: 25px;
border: 1px solid white;
width: 40px;
height: 40px;
}
#footer-bottom .et-social-icon a:hover {
background: #03a1b5;
opacity: 1!important;
}
#footer-bottom .et-social-icons li {
display: inline-block;
margin-left: 10px;
}
Links mentioned in the video:
Tutorials on how to import more footer icons:
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Hi Josh,
Thanks for this series of tutorials – I am already getting some great stuff from them!
When I use your CSS code on a website I am creating, the social icons do not rise above the top line of the footer but instead are partly hidden. Do you know if this can be corrected? Also, the background and icon colors do not change when I vary the rgb.
Thanks.
Hi Josh, I figured out how to change the background and icon colors!
(PS. the website I am working on is: https://thaimassagekhaolak.com/)
Looking good, Eddie! Awesome to hear the tutorials are helping you out! I’m not sure why the icons are appearing under the section above…I haven’t run into that issue. I even tried using z-index on your site to no avail. I’ll have to see if there is another fix or perhaps it’s something to do with the boxed Divi layout or something like that.
Hi there Eddie and Josh, firstly I wanna say a huge thanks to you Josh for such great video tuts!
Eddie, regarding your partly hidden icons, I inspected your CSS and saw that your #footer-bottom overflow is set to hidden. If you change the state to visible, then all should be fine:
wp_head.css line 13:
#footer-bottom {
overflow: visible;
}
All the best guys.
Jason, thanks so much for pointing that out! I was searching all throughout the interwebs to find out what was going on there. Awesome and GREAT to know for future reference!
Thanks Jason, I found a way for it to work by creating a php file in a new includes folder in my Divi child theme (http://www.eleganttweaks.com/divi/add-social-icons-header-footer/) but I had to deactivate the Divi Booster. Your method worked a treat!
Thanks for letting us know, Eddie! That’s great to know for my reference.
This is great! Thank you Josh. Will be following every tutorial you will be posting. Already implemented this on my website 🙂
Thanks for your encouragement, Rika! I just checked out your site and it looks awesome. Glad to see that the tutorial helped spice up your Divi footer! 🙂
Hi Josh,
Perhaps a little off topic, but how do you work with the stylesheet? It doesn’t look like you’re operating from the WordPress editor but the CSS is still implemented right away? How does this work?
By the way, great tutorials! I’ll be tuning in for the next one for sure 🙂
Hey Daniel,
I connect via FTP to my child theme stylesheet and make the edits there! I use Transmit for mac to connect and TextMate to edit the code. You can put the custom CSS in the Divi Theme Options but it doesn’t show you the colors or line numbers. Let me know if that answer helps.
And thanks for the feedback and support!
Sorry for replying so late, but the answer really did help! Thanks a lot 🙂
Awesome. No problemo!
Here’s a full tutorial on that, Daniel! https://joshhall.co/where-to-put-your-custom-css-in-divi/
HI Josh
I just stumbled upon your tutorials today – they are awesome! I was just about to ask how you work with your stylesheet, but Daniel beat me to it! Anyway, I just wanted say thank you and a big thumbs up!
Thanks so much, Sharon! Yep I’m putting a tutorial together soon on how I go through FTP directly to my stylesheet. Look for that here in a couple weeks. Thanks again for your comment and encouragement!
Sharon, as promised! https://joshhall.co/where-to-put-your-custom-css-in-divi/