How to Create Overlapping Footer Social Icons in Divi

by | Aug 29, 2017 | Divi Tutorial | 17 comments

<iframe width="560" height="315" src="https://www.youtube.com/embed/AYVI2RzlAUY?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

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;
}