Jump to content

Floating Social Icons under a floating CTA button

Go to solution Solved by tuanphan,

Recommended Posts

Posted (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 by LukeDesign
Clarification
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

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. 

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.