Social Media Follow on Left Sidebar (like Monarch)

Jul 27, 2016 | CSS Tutorial | 22 comments

Have you ever wanted your social media links on the left side of your site like Monarch, not to share but just to link out? In this quick tut there’s a little snippet to put the social media follow module fixed to the left side of your site (instead of using a plugin). The icons are made slightly larger for desktop and tablet.

A Girl and Her Mac | Divi Tutorial
A Girl and Her Mac | Divi Tutorial

Instructions

  • Start a section, select your row breakup and add the social media follow module to one of your module slots. It doesn’t matter whether it’s 1, 1/2, 1/3 or 1/4 or whether it’s first or last.

  • Set your social media links and colors and select rounded rectangle. This tutorial makes the rounded rectangle into a square so it looks better against the edge.

  • Put the following code in your Divi options panel or your child stylesheet.

{;} css code

ul.et_pb_social_media_follow {
    position: fixed;
    left: 0;
    top: 30%;
    width: 40px;
    padding-left: 0;
    z-index: 9999 !important;
}
.et_pb_social_media_follow li {
    margin-bottom: 0 !important;
}
.et_pb_social_media_follow li a.icon {
    border-radius: 0 !important; /*** remove this snippet if you don't want to force square edges ***/
}
@media only screen and (min-width: 601px) {
    .et_pb_social_media_follow li a.icon {
        width: 40px;
        height: 40px;
    }
    .et_pb_social_media_follow li a.icon::before {
        font-size: 22px;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}

Notes

  • I’m having the links open in the same window for this demo but I normally suggest having them open in a new window (why help people leave your site?)
  • If you want the icons even bigger you should just have to change every instance of 40px to the same desired number as well as raise the font-size. Just play with the numbers, you should get there eventually 😉
  • Don’t forget to make your module global and place it on every page that you want it to appear (unless you are using an injector plugin).