Add floating social icons to your theme

If you'd like to prominently feature your social icons, adding a floating sidebar is a great way to put them front and center on your site. Below we'll show you how to implement floating social icons in any 17th Avenue Wordpress theme.

Add Floating Social Icons to your theme

1. Go to Wordpress > Appearance > Customize > Additional CSS.

2. Paste this code snippet in the box. If using the Amelia theme, scroll down for ALTERNATE code.

@media only screen and (min-width: 1000px) {

	.floating-icons {
	    position: fixed;
	    left: 0;
	    padding: 10px;
	    top: 33%;
            z-index: 9999;
            background: #fff;
	}
	.floating-icons .social i {
            padding: 7px;
            display: block;
            margin: 0;
        }
	.floating-icons .icon-pinterest,
        .floating-icons .icon-gplus,
        .floating-icons .icon-tumblr,
        .floating-icons .icon-youtube,
        .floating-icons .icon-instagram {
            font-size: 12px;
        }
        .floating-icons .icon-facebook,
        .floating-icons .icon-heart,
        .floating-icons .icon-twitter,
        .floating-icons .icon-email {
            font-size: 13px;
        }
}

3. After pasting the code, click Update File.

4. Open the Social Icons code file that came with your theme (or grab the code from the bottom of  this page). Add your links per the theme instructions.

In the social icons code, find this line:

<div align="center">

Replace that line with this:

<div class="floating-icons">

5. Go to Wordpress > Appearance > Widgets.

7. Drag a Custom HTML widget into the Primary Sidebar widget area. Paste your code in the text box and then save.

8. If your icons aren't displaying like the screenshot above, you may need to  clear your cache

Note: If you are using a website-style theme that has no sidebar on the home page, place the Custom HTML widget in a footer widget area instead (i.e. Footer 1).

Alternate code for Amelia theme

@media only screen and (min-width: 1000px) {

	.floating-icons {
	    width: 30px;
	    position: fixed;
	    left: 0;
	    top: 33%;
	    margin-left: 10px;
            z-index: 0;
	}
	.floating-icons .social i {
            padding: 7px;
            display: block;
        }
	.floating-icons .icon-pinterest,
        .floating-icons .icon-gplus,
        .floating-icons .icon-tumblr,
        .floating-icons .icon-youtube,
        .floating-icons .icon-instagram {
            font-size: 12px;
        }
        .floating-icons .icon-facebook,
        .floating-icons .icon-heart,
        .floating-icons .icon-twitter,
        .floating-icons .icon-email {
            font-size: 13px;
        }

}