{"id":2088,"date":"2017-01-17T16:22:04","date_gmt":"2017-01-17T16:22:04","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2088"},"modified":"2017-01-17T16:22:04","modified_gmt":"2017-01-17T16:22:04","slug":"sticky-social-media-icons-floating-sidebar-css","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/","title":{"rendered":"How to Create Sticky Social Media Floating Sidebar with CSS"},"content":{"rendered":"<p>Social Media takes an important part of your online business to reach more customers. Social media buttons are very useful for every website and it helps the user to get updates from the website. Also, <b>sticky social bar<\/b> surely increases the social media followers of your website and helps to drive traffic to your website. In this tutorial, we are going to create a <b>sticky social media buttons bar with CSS<\/b> without impacting website design.<\/p>\n<p>You can find many jQuery plugins for floating sidebar, but it may impact your site speed and design. To overcome this issue, we&#8217;ll provide a simple CSS code to add animated sticky social bar at the left\/right side of your website. You can add this <b>social media floating sidebar<\/b> with smooth hover over animation using CSS.<\/p>\n<p>In this example code, we&#8217;ll implement a social share button bar at the right side with pure CSS. In this social bar, some of the most popular social media links will be included &#8211; Facebook, Twitter, Google+, LinkedIn, YouTube, and Pinterest.<\/p>\n<h2>HTML Code<\/h2>\n<p>Placed the following HTML in the &lt;<span style=\"color:#bf4f24\">body<\/span>> element of the web page, and add your social profile links to the respective social icons.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"sticky-container\"<\/span>>\r\n    &lt;<span style=\"color:#bf4f24\">ul<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"sticky\"<\/span>>\r\n        &lt;<span style=\"color:#bf4f24\">li<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">img<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"images\/facebook-circle.png\"<\/span> <span style=\"color:#bf4f24\">width<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span> <span style=\"color:#bf4f24\">height<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">p<\/span>>&lt;<span style=\"color:#bf4f24\">a<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"https:\/\/www.facebook.com\/codexworld\"<\/span> <span style=\"color:#bf4f24\">target<\/span>=<span style=\"color:#0b6125\">\"_blank\"<\/span>>Like Us on&lt;<span style=\"color:#bf4f24\">br<\/span>>Facebook&lt;\/<span style=\"color:#bf4f24\">a<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">li<\/span>>\r\n        &lt;<span style=\"color:#bf4f24\">li<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">img<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"images\/twitter-circle.png\"<\/span> <span style=\"color:#bf4f24\">width<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span> <span style=\"color:#bf4f24\">height<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">p<\/span>>&lt;<span style=\"color:#bf4f24\">a<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"https:\/\/twitter.com\/codexworldblog\"<\/span> <span style=\"color:#bf4f24\">target<\/span>=<span style=\"color:#0b6125\">\"_blank\"<\/span>>Follow Us on&lt;<span style=\"color:#bf4f24\">br<\/span>>Twitter&lt;\/<span style=\"color:#bf4f24\">a<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">li<\/span>>\r\n        &lt;<span style=\"color:#bf4f24\">li<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">img<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"images\/gplus-circle.png\"<\/span> <span style=\"color:#bf4f24\">width<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span> <span style=\"color:#bf4f24\">height<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">p<\/span>>&lt;<span style=\"color:#bf4f24\">a<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"https:\/\/plus.google.com\/codexworld\"<\/span> <span style=\"color:#bf4f24\">target<\/span>=<span style=\"color:#0b6125\">\"_blank\"<\/span>>Follow Us on&lt;<span style=\"color:#bf4f24\">br<\/span>>Google+&lt;\/<span style=\"color:#bf4f24\">a<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">li<\/span>>\r\n        &lt;<span style=\"color:#bf4f24\">li<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">img<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"images\/linkedin-circle.png\"<\/span> <span style=\"color:#bf4f24\">width<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span> <span style=\"color:#bf4f24\">height<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">p<\/span>>&lt;<span style=\"color:#bf4f24\">a<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"https:\/\/www.linkedin.com\/company\/codexworld\"<\/span> <span style=\"color:#bf4f24\">target<\/span>=<span style=\"color:#0b6125\">\"_blank\"<\/span>>Follow Us on&lt;<span style=\"color:#bf4f24\">br<\/span>>LinkedIn&lt;\/<span style=\"color:#bf4f24\">a<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">li<\/span>>\r\n        &lt;<span style=\"color:#bf4f24\">li<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">img<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"images\/youtube-circle.png\"<\/span> <span style=\"color:#bf4f24\">width<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span> <span style=\"color:#bf4f24\">height<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">p<\/span>>&lt;<span style=\"color:#bf4f24\">a<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"http:\/\/www.youtube.com\/codexworld\"<\/span> <span style=\"color:#bf4f24\">target<\/span>=<span style=\"color:#0b6125\">\"_blank\"<\/span>>Subscribe on&lt;<span style=\"color:#bf4f24\">br<\/span>>YouYube&lt;\/<span style=\"color:#bf4f24\">a<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">li<\/span>>\r\n        &lt;<span style=\"color:#bf4f24\">li<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">img<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"images\/pin-circle.png\"<\/span> <span style=\"color:#bf4f24\">width<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span> <span style=\"color:#bf4f24\">height<\/span>=<span style=\"color:#0b6125\">\"32\"<\/span>>\r\n            &lt;<span style=\"color:#bf4f24\">p<\/span>>&lt;<span style=\"color:#bf4f24\">a<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"https:\/\/www.pinterest.com\/codexworld\"<\/span> <span style=\"color:#bf4f24\">target<\/span>=<span style=\"color:#0b6125\">\"_blank\"<\/span>>Follow Us on&lt;<span style=\"color:#bf4f24\">br<\/span>>Pinterest&lt;\/<span style=\"color:#bf4f24\">a<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n        &lt;\/<span style=\"color:#bf4f24\">li<\/span>>\r\n    &lt;\/<span style=\"color:#bf4f24\">ul<\/span>>\r\n&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<h2>CSS Code<\/h2>\n<p>The following short CSS is enough to implement a Sticky Social Icons bar to your website. Pleace this CSS in the &lt;<span style=\"color:#bf4f24\">head<\/span>> section of the web page.<\/p>\n<pre><span style=\"color:#bf4f24\">.sticky-container<\/span>{\r\n    <span style=\"color:#691c97\">padding<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">0<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">margin<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">0<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">position<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">fixed<\/span>;\r\n    <span style=\"color:#691c97\">right<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">-130<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">top<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">230<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">width<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">210<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">z-index<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">1100<\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.sticky<\/span> <span style=\"color:#bf4f24\">li<\/span>{\r\n    <span style=\"color:#691c97\">list-style-type<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">none<\/span>;\r\n    <span style=\"color:#691c97\">background-color<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">#fff<\/span>;\r\n    <span style=\"color:#691c97\">color<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">#efefef<\/span>;\r\n    <span style=\"color:#691c97\">height<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">43<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">padding<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">0<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">margin<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">0<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">0<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">1<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">0<span style=\"color:#794938\">px<\/span><\/span>;\r\n    -webkit-transition<span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">all<\/span> <span style=\"color:#811f24;font-weight:700\">0.25<span style=\"color:#794938\">s<\/span><\/span> ease-in-out;\r\n    -moz-transition<span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">all<\/span> <span style=\"color:#811f24;font-weight:700\">0.25<span style=\"color:#794938\">s<\/span><\/span> ease-in-out;\r\n    -o-transition<span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">all<\/span> <span style=\"color:#811f24;font-weight:700\">0.25<span style=\"color:#794938\">s<\/span><\/span> ease-in-out;\r\n    transition<span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">all<\/span> <span style=\"color:#811f24;font-weight:700\">0.25<span style=\"color:#794938\">s<\/span><\/span> ease-in-out;\r\n    <span style=\"color:#691c97\">cursor<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">pointer<\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.sticky<\/span> <span style=\"color:#bf4f24\">li<\/span><span style=\"color:#bf4f24\">:hover<\/span>{\r\n    <span style=\"color:#691c97\">margin-left<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">-115<span style=\"color:#794938\">px<\/span><\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.sticky<\/span> <span style=\"color:#bf4f24\">li<\/span> <span style=\"color:#bf4f24\">img<\/span>{\r\n    <span style=\"color:#691c97\">float<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">left<\/span>;\r\n    <span style=\"color:#691c97\">margin<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">5<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">4<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">margin-right<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">5<span style=\"color:#794938\">px<\/span><\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.sticky<\/span> <span style=\"color:#bf4f24\">li<\/span> <span style=\"color:#bf4f24\">p<\/span>{\r\n    <span style=\"color:#691c97\">padding-top<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">5<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">margin<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">0<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">line-height<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">16<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">font-size<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">11<span style=\"color:#794938\">px<\/span><\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.sticky<\/span> <span style=\"color:#bf4f24\">li<\/span> <span style=\"color:#bf4f24\">p<\/span> <span style=\"color:#bf4f24\">a<\/span>{\r\n    <span style=\"color:#691c97\">text-decoration<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">none<\/span>;\r\n    <span style=\"color:#691c97\">color<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">#2C3539<\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.sticky<\/span> <span style=\"color:#bf4f24\">li<\/span> <span style=\"color:#bf4f24\">p<\/span> <span style=\"color:#bf4f24\">a<\/span><span style=\"color:#bf4f24\">:hover<\/span>{\r\n    <span style=\"color:#691c97\">text-decoration<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#b4371f\">underline<\/span>;\r\n}\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>Here we&#8217;ve added only some most popular social icons to the sticky social bar, you can add other social media icons or useful links based on your requirement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Social Media takes an important part of your online business to reach more customers. Social media buttons are very useful for every website and it helps the user to get updates from the website. Also, <\/p>\n","protected":false},"author":1,"featured_media":2090,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[130],"tags":[124,251],"class_list":["post-2088","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css","tag-social-media","cat-130-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create Sticky Social Media Floating Sidebar with CSS - CodexWorld<\/title>\n<meta name=\"description\" content=\"Sticky social media floating sidebar with CSS - Create sticky social icons bar for your website using CSS. Simple code to add social media floating sidebar with smooth hover over animation using CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Sticky Social Media Floating Sidebar with CSS - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Sticky social media floating sidebar with CSS - Create sticky social icons bar for your website using CSS. Simple code to add social media floating sidebar with smooth hover over animation using CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-17T16:22:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/01\/sticky-social-media-floating-sidebar-with-css-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"How to Create Sticky Social Media Floating Sidebar with CSS\",\"datePublished\":\"2017-01-17T16:22:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/\"},\"wordCount\":271,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/sticky-social-media-floating-sidebar-with-css-codexworld.png\",\"keywords\":[\"CSS\",\"Social Media\"],\"articleSection\":[\"HTML&amp;CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/\",\"name\":\"How to Create Sticky Social Media Floating Sidebar with CSS - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/sticky-social-media-floating-sidebar-with-css-codexworld.png\",\"datePublished\":\"2017-01-17T16:22:04+00:00\",\"description\":\"Sticky social media floating sidebar with CSS - Create sticky social icons bar for your website using CSS. Simple code to add social media floating sidebar with smooth hover over animation using CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/sticky-social-media-floating-sidebar-with-css-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/sticky-social-media-floating-sidebar-with-css-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"sticky-social-media-floating-sidebar-with-css-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/sticky-social-media-icons-floating-sidebar-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Sticky Social Media Floating Sidebar with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Sticky Social Media Floating Sidebar with CSS - CodexWorld","description":"Sticky social media floating sidebar with CSS - Create sticky social icons bar for your website using CSS. Simple code to add social media floating sidebar with smooth hover over animation using CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Sticky Social Media Floating Sidebar with CSS - CodexWorld","og_description":"Sticky social media floating sidebar with CSS - Create sticky social icons bar for your website using CSS. Simple code to add social media floating sidebar with smooth hover over animation using CSS.","og_url":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-01-17T16:22:04+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/01\/sticky-social-media-floating-sidebar-with-css-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"How to Create Sticky Social Media Floating Sidebar with CSS","datePublished":"2017-01-17T16:22:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/"},"wordCount":271,"commentCount":7,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/01\/sticky-social-media-floating-sidebar-with-css-codexworld.png","keywords":["CSS","Social Media"],"articleSection":["HTML&amp;CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/","url":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/","name":"How to Create Sticky Social Media Floating Sidebar with CSS - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/01\/sticky-social-media-floating-sidebar-with-css-codexworld.png","datePublished":"2017-01-17T16:22:04+00:00","description":"Sticky social media floating sidebar with CSS - Create sticky social icons bar for your website using CSS. Simple code to add social media floating sidebar with smooth hover over animation using CSS.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/01\/sticky-social-media-floating-sidebar-with-css-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/01\/sticky-social-media-floating-sidebar-with-css-codexworld.png","width":1366,"height":768,"caption":"sticky-social-media-floating-sidebar-with-css-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/sticky-social-media-icons-floating-sidebar-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"How to Create Sticky Social Media Floating Sidebar with CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/01\/sticky-social-media-floating-sidebar-with-css-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-xG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2088"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2088\/revisions"}],"predecessor-version":[{"id":2092,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2088\/revisions\/2092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2090"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}