RuthRTW Posted April 21 Share Posted April 21 Please help. I want at CTA button to call our phone number. First I tried setting it up in the Home/Page Settings/Advanced. It worked on that page yesterday, but now the button has disappeared. I also tried entering the code in the Website Tools/Code Injection/Header. Neither is creating the Call button I want to float when scrolling. Here's the code I used: <div id="customFloatingButton"> <a href="tel:5859242060" target="_blank">Call 585-924-2060</a> </div> <style> #customFloatingButton { position: fixed; botloatingButton a { display: inline-block; background-color: #8ACB88; color: white; padding: 10px 10px; text-decoration: none; box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.5); transition: 200ms; } #customFloatingButton a:hover { transform: scale(1.04); } </style> Link to comment
paul2009 Posted April 21 Share Posted April 21 Please share the site’s URL with the community. By default, it isn't included in the public post. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
RuthRTW Posted April 21 Author Share Posted April 21 2 hours ago, paul2009 said: Please share the site’s URL with the community. By default, it isn't included in the public post. https://guppy-flatworm-nret.squarespace.com/ Thanks for letting me know that, as I did put it in the post but not the comment. Can you help me? Link to comment
sqsp_guru Posted April 21 Share Posted April 21 @RuthRTW Can you share the Password of the website. Might be z-index would be the issue, you can add z-index: 9999; in your CSS code and test it. Please like and upvote if you found my comments helpful. Cheers 🙂 Agha Waqas (sqsp guru) Squarespace Website Developer Contact me: https://sqspguru.com or hello@sqspguru.com ☕ Did I help? Buy me a coffee? (thank you!) Link to comment
RuthRTW Posted April 21 Author Share Posted April 21 Quote I added z-index: 9999 in a new line below the position: fixed; Unfortunately I still have no button. Link to comment
sqsp_guru Posted April 21 Share Posted April 21 (edited) @RuthRTW can you share the password of the website? Edited April 21 by sqsp_guru Please like and upvote if you found my comments helpful. Cheers 🙂 Agha Waqas (sqsp guru) Squarespace Website Developer Contact me: https://sqspguru.com or hello@sqspguru.com ☕ Did I help? Buy me a coffee? (thank you!) Link to comment
sqsp_guru Posted April 21 Share Posted April 21 @RuthRTW There is a syntax issue in your Code. Below is the updated version of the code. Replace old code with this new one. <style> #customFloatingButton { position: fixed; bottom: 10px; right: 10px; } #customFloatingButton a { display: inline-block; background-color: #8ACB88; color: white; padding: 10px 10px; text-decoration: none; box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.5); transition: all 200ms; z-index: 9999; } #customFloatingButton a:hover { transform: scale(1.04); } </style> Please like and upvote if you found my comments helpful. Cheers 🙂 Agha Waqas (sqsp guru) Squarespace Website Developer Contact me: https://sqspguru.com or hello@sqspguru.com ☕ Did I help? Buy me a coffee? (thank you!) Link to comment
RuthRTW Posted April 21 Author Share Posted April 21 @sqsp_guru Thanks for catching syntax error -- can you tell I am new to this? I've attached a screenshot of the updated code in the website header. When I first changed it I saw the button but then when I refreshed, it disappeared again! I tried again to add the corrected code to the header of the home page & still nothing. Pswd: NewSite#SS24 Link to comment
sqsp_guru Posted April 22 Share Posted April 22 4 hours ago, RuthRTW said: @sqsp_guru Thanks for catching syntax error -- can you tell I am new to this? I've attached a screenshot of the updated code in the website header. When I first changed it I saw the button but then when I refreshed, it disappeared again! I tried again to add the corrected code to the header of the home page & still nothing. Pswd: NewSite#SS24 Your password is not working. can you double check the password? Please like and upvote if you found my comments helpful. Cheers 🙂 Agha Waqas (sqsp guru) Squarespace Website Developer Contact me: https://sqspguru.com or hello@sqspguru.com ☕ Did I help? Buy me a coffee? (thank you!) Link to comment
RuthRTW Posted April 22 Author Share Posted April 22 Sorry that was the incorrect password. The password is timewise2024 Thanks for any help you can provide! Link to comment
Solution sqsp_guru Posted April 22 Solution Share Posted April 22 @RuthRTW add z-index to #customFloatingButton. Updated Code Version (Replace this with old one) <style> #customFloatingButton { position: fixed; bottom: 10px; right: 10px; z-index: 999; } #customFloatingButton a { display: inline-block; background-color: #8ACB88; color: white; padding: 10px 10px; text-decoration: none; box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.5); transition: 200ms; } #customFloatingButton a:hover { transform: scale(1.04); } </style> Please like and upvote if you found my comments helpful. Cheers 🙂 Agha Waqas (sqsp guru) Squarespace Website Developer Contact me: https://sqspguru.com or hello@sqspguru.com ☕ Did I help? Buy me a coffee? (thank you!) Link to comment
RuthRTW Posted April 23 Author Share Posted April 23 @sqsp_guru Thank you for your help -- floating button working well now. Link to comment
graciad Posted April 30 Share Posted April 30 I have a similar problem need this image to be fixed and floating on main page and this is the code I am using. unfortunately it becomes massive when I put in code. #block-yui_3_17_2_1_1714285676278_6321 {position: absoulute; position: fixed; bottom: 0; right: 0; z-index: 999; height:"60px"; } it is supposed to a lot smaller, a lot smaller. Link to comment
tuanphan Posted May 2 Share Posted May 2 On 4/30/2024 at 9:34 PM, graciad said: I have a similar problem need this image to be fixed and floating on main page and this is the code I am using. unfortunately it becomes massive when I put in code. #block-yui_3_17_2_1_1714285676278_6321 {position: absoulute; position: fixed; bottom: 0; right: 0; z-index: 999; height:"60px"; } it is supposed to a lot smaller, a lot smaller. Can you share site url? We can check problem easier 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!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment