LukeDesign Posted April 17 Posted April 17 (edited) I added floating social media icons using a code that pulls the icons from the footer block. However, I want them to float on the right underneath a floating CTA "Contact Us" button I already have on the right. I want them to sit vertically under it. Here is my site: https://www.lucasano.com/ Here is the code I am using for both the floating CTA and the social icons: /* Floating Contact Button */ #floating-button { position: fixed; top: 45%; right: 0; transform: rotate(90deg) translateX(50%); transform-origin: 100% 0; z-index: 10000000; } /* Style Floating Contact Button */ #floating-button a { background: #262C35; color: #EADFD0; display: inline-block; font-size: 15px; text-transform: uppercase; font-family: oswald; font-weight: 400; letter-spacing: 0.1em; padding: 10px 25px; border-radius: 0px 0px 8px 8px; transition: ease 0.5s !important; } #floating-button a:hover { padding: 15px 30px; font-size: 17px; background: #555555; } /*Floating Contact Button Mobile */ @media screen and (max-width: 768px) { #floating-button { bottom: 0; top: auto; transform: none; left: 0; text-align: center !important; } #floating-button a { padding: 10px 0px; border-radius:10px 10px 0px 0px !important; width: 40% !important; } } /*Floating Social Icons */ #page {z-index:0;} footer { overflow: unset; z-index: 10000000; } footer .sqs-svg-icon--wrapper { display: block !important; } footer .socialaccountlinks-v2-block { pointer-events: none; position: fixed !important; top: 65% !important; left: 10px!important; z-index: 10000000; } footer .socialaccountlinks-v2-block .sqs-svg-icon--list { pointer-events: none; display: flex; flex-direction: column; } footer .socialaccountlinks-v2-block a { margin: 0 0 15px !important; /*Change this number to adjust the spacing of the social icons*/ display: inline-block; pointer-events: auto; } Edited April 17 by LukeDesign Clarification
LukeDesign Posted April 18 Author Posted April 18 Hi all - hoping someone can help me out with this 🙂: I tried changing the social media icon block from "left" to "right" in the code but it moves the social icons slightly more to the left.
Solution tuanphan Posted April 21 Solution Posted April 21 First, change left to right Next, add this code under footer .socialaccountlinks-v2-block nav { align-items: flex-end !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment