Jump to content

Fixed quote/sticky link falls behind pictures etc.

By yostudios, in Customize with code

Go to solution Solved by Ziggy,

Recommended Posts

yostudios Level 4

yostudios

Posted
Posted (edited)

 Hello!

I have a fixed quote/logo/watermark on my website, that keep disappearing behind pictures etc. when scrolling. 

image.thumb.png.7750e9715c6d88d981db6e392232bf7c.png

 

I think the logo/watermark is inserted via one of these custom CSS-code (I didn't do it, so I dont know much): 

 

@media screen and (min-width:550px){
.page-section {border:7px solid transparent}
div.stickylink{
  position:fixed;
  width: 320px;
  bottom: 0px;
  right: 0px;
  height: 320px;
  border-radius: 50%;
  opacity: 0.9;
  z-index:900;
  }
}

 

or this

 

.page-section {border:7px solid transparent}
div.stickylink{
  position:fixed;
  width: 320px;
  bottom: 0px;
  right: 0px;
  height: 320px;
  border-radius: 50%;
  opacity: 0.9;
  z-index:900;
  }
}

 

It's also inserted in a code block in my footer like this:

<div class="stickylink">
    <img src=" https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/6059853c3ca5ae3b260b169e/1616479548490/YO_QUOTE_OUT_WHITE+(1).png">
</div>

 

Is there any way to make it go appear in front at all times? Something to add to the code maybe?

 

Thanks in advance 🙂

Edited by yostudios
New info
Link to comment
  • Replies 5
  • Views 245
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ziggy
Ziggy

I have a solution for you. Remove the code block from the footer.  Place first code in Header Code Injection Replace CSS with provided HTML for Header Code Injection <ht

yostudios
yostudios

It worked like a charm!! Thank you so much 🙂

Posted Images

Ziggy Level 14

Ziggy

Posted
Posted

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
  • Solution
Ziggy Level 14

Ziggy

Posted
  • Solution
Posted

I have a solution for you.

  1. Remove the code block from the footer. 
  2. Place first code in Header Code Injection
  3. Replace CSS with provided

HTML for Header Code Injection 

<html>
  <div class="stickylink">
    <img src="https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/6059853c3ca5ae3b260b169e/1616479548490/YO_QUOTE_OUT_WHITE+(1).png">
  </div>
</html>

Custom CSS 

@media screen and (min-width:550px) {
  .stickylink {
  position:fixed;
  bottom: 0px;
  right: 0px;
  opacity: 0.9;
  z-index:900;
  }
  .stickylink img {
    width:320px;
    height:320px
  }
}

Hope that works for you! Give me a thumbs up if you can, thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
yostudios Level 4

yostudios

Posted
  • Author
Posted
On 1/20/2023 at 12:53 PM, Ziggy said:

I have a solution for you.

  1. Remove the code block from the footer. 
  2. Place first code in Header Code Injection
  3. Replace CSS with provided

HTML for Header Code Injection 

<html>
  <div class="stickylink">
    <img src="https://static1.squarespace.com/static/60407c1720a81d188558b37e/t/6059853c3ca5ae3b260b169e/1616479548490/YO_QUOTE_OUT_WHITE+(1).png">
  </div>
</html>

Custom CSS 

@media screen and (min-width:550px) {
  .stickylink {
  position:fixed;
  bottom: 0px;
  right: 0px;
  opacity: 0.9;
  z-index:900;
  }
  .stickylink img {
    width:320px;
    height:320px
  }
}

Hope that works for you! Give me a thumbs up if you can, thanks!

It worked like a charm!!

Thank you so much 🙂

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources