Dave909 Posted January 18, 2022 Share Posted January 18, 2022 @tuanphan thanks for that code. If I insert it on a single page like home, they appear - so that works. If I insert it on shop page (settings - header code) they don't appear. To understand what I want to do: I want that users can navigate more easily on our shop. If you scroll in our shop (Soft4Home - günstig & zuverlässig! — Soft4Home) you will see that categories are not so easy to find, and they are not sticking while I'm scrolling. So that's why I wanted to have some buttons for the most-used categories floating. But also I will use your code for desktop-view to show some buttons which will link to most-used categories. Thanks and best regards. Link to comment
tuanphan Posted January 19, 2022 Share Posted January 19, 2022 18 hours ago, Dave909 said: @tuanphan thanks for that code. If I insert it on a single page like home, they appear - so that works. If I insert it on shop page (settings - header code) they don't appear. To understand what I want to do: I want that users can navigate more easily on our shop. If you scroll in our shop (Soft4Home - günstig & zuverlässig! — Soft4Home) you will see that categories are not so easy to find, and they are not sticking while I'm scrolling. So that's why I wanted to have some buttons for the most-used categories floating. But also I will use your code for desktop-view to show some buttons which will link to most-used categories. Thanks and best regards. To make categories sticky on scroll, add this to DESIGN > CUSTOM CSS /* Shop categories sticky */ @media screen and (min-width:641px) { .ProductList-filter { position: sticky; position: -webkit-sticky; top: 5px; } } 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
kbentonbrooks203 Posted January 20, 2022 Share Posted January 20, 2022 On 5/14/2020 at 9:08 AM, tuanphan said: Add this to Home > Settings > Advanced > Code Injection > Footer <a href="https://beaverhero.com" class="t-button">Button Text</a> and add this to Code Injection > Header <style> .t-button { display: inline-block; background: green; color: white; padding: 1em 2em; border-top-left-radius: 10px; border-bottom-left-radius: 10px; position: fixed; top: 50%; right: 0; } </style> @tuanphan Greetings! I'm attempting to use your code on my SS website but I'm having trouble getting the text box to hover over every section. It only seems to be present in the footer. Any assistance would be much appreciated. Link to comment
tuanphan Posted January 21, 2022 Share Posted January 21, 2022 On 1/20/2022 at 12:08 PM, kbentonbrooks203 said: @tuanphan Greetings! I'm attempting to use your code on my SS website but I'm having trouble getting the text box to hover over every section. It only seems to be present in the footer. Any assistance would be much appreciated. What is site url? 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
kbentonbrooks203 Posted January 21, 2022 Share Posted January 21, 2022 @tuanphan Thank you for getting back to me. The Url is : https://bumblebee-plum-rbr7.squarespace.com/ Link to comment
tuanphan Posted January 22, 2022 Share Posted January 22, 2022 18 hours ago, kbentonbrooks203 said: @tuanphan Thank you for getting back to me. The Url is : https://bumblebee-plum-rbr7.squarespace.com/ Add this code under <style> .t-button { z-index: 99999; } </style> 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
kbentonbrooks203 Posted January 22, 2022 Share Posted January 22, 2022 4 hours ago, tuanphan said: <style> .t-button { z-index: 99999; } </style> @tuanphanYou're nothing short of amazing. I appreciate your assistance. Link to comment
AMBERSIS Posted February 24, 2022 Share Posted February 24, 2022 Hi @tuanphan I am trying to create a floating button on every page that follows the scroller from top to bottom. I have tried to code in the chats, but it seems to disappear underneath certain blocks. Also, how do I link and edit the button? Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 On 2/25/2022 at 6:02 AM, AMBERSIS said: Hi @tuanphan I am trying to create a floating button on every page that follows the scroller from top to bottom. I have tried to code in the chats, but it seems to disappear underneath certain blocks. Also, how do I link and edit the button? Can you add the code & share link to your site? We can check 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
AMBERSIS Posted February 28, 2022 Share Posted February 28, 2022 (edited) @tuanphan Went ahead and added the code back in. URL is https://www.bryantelectricservice.com The button pops up on the right hand side once you get to the Footer. We want it to be visible on the right hand side the entire time, from top to bottom. We want the button on every page on the right hand side when you scroll. Thank you so much! Edited February 28, 2022 by AMBERSIS Link to comment
tuanphan Posted March 3, 2022 Share Posted March 3, 2022 On 2/28/2022 at 10:31 AM, AMBERSIS said: @tuanphan Went ahead and added the code back in. URL is https://www.bryantelectricservice.com The button pops up on the right hand side once you get to the Footer. We want it to be visible on the right hand side the entire time, from top to bottom. We want the button on every page on the right hand side when you scroll. Thank you so much! Don't remove any code in your current code. Add this to Design > Custom CSS /* Show button alltime */ .t-button { z-index: 123456789 !important; } AMBERSIS 1 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
AMBERSIS Posted March 6, 2022 Share Posted March 6, 2022 @tuanphan Thank you so much for your help!!! Works perfect! 😁 Link to comment
Aygen Posted March 24, 2022 Share Posted March 24, 2022 Hi, Thanks for sharing such great useful code. One question though. Is there a way to ad two buttons, one on the right and another on the left ? Thank you, A. Link to comment
tuanphan Posted March 26, 2022 Share Posted March 26, 2022 On 3/24/2022 at 2:21 PM, Aygen said: Hi, Thanks for sharing such great useful code. One question though. Is there a way to ad two buttons, one on the right and another on the left ? Thank you, A. Add this code <a href="https://beaverhero.com" class="t-button">Button Text</a> <a href="https://beaverhero.com" class="t-button button2">Button Text</a> <style> .t-button { display: inline-block; background: green; color: white; padding: 1em 2em; border-top-left-radius: 10px; border-bottom-left-radius: 10px; position: fixed; top: 50%; right: 0; } .button2 { right: unset !important; left: 0; } </style> 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
RollaAgency Posted March 31, 2022 Share Posted March 31, 2022 Hi, i'm trying to set a call to action button/floating button on the right side of my webpage, i followed tuanphan's steps but it's not working, when i hit the save button it appears for a second, but it immediately disappeared. i'm sending the screenshot to see if anyone can help me out here, thanks!! Link to comment
RollaAgency Posted March 31, 2022 Share Posted March 31, 2022 3 minutes ago, RollaAgency said: Hi, i'm trying to set a call to action button/floating button on the right side of my webpage, i followed tuanphan's steps but it's not working, when i hit the save button it appears for a second, but it immediately disappeared. i'm sending the screenshot to see if anyone can help me out here, thanks!! i just Found my answer this works awesome! thanks!!! Posted March 3 On 2/27/2022 at 10:31 PM, AMBERSIS said: @tuanphan Went ahead and added the code back in. URL is https://www.bryantelectricservice.com The button pops up on the right hand side once you get to the Footer. We want it to be visible on the right hand side the entire time, from top to bottom. We want the button on every page on the right hand side when you scroll. Thank you so much! Don't remove any code in your current code. Add this to Design > Custom CSS /* Show button alltime */ .t-button { z-index: 123456789 !important; } Link to comment
tuanphan Posted April 2, 2022 Share Posted April 2, 2022 On 3/31/2022 at 11:12 PM, RollaAgency said: i just Found my answer this works awesome! thanks!!! Posted March 3 On 2/27/2022 at 10:31 PM, AMBERSIS said: @tuanphan Went ahead and added the code back in. URL is https://www.bryantelectricservice.com The button pops up on the right hand side once you get to the Footer. We want it to be visible on the right hand side the entire time, from top to bottom. We want the button on every page on the right hand side when you scroll. Thank you so much! Don't remove any code in your current code. Add this to Design > Custom CSS /* Show button alltime */ .t-button { z-index: 123456789 !important; } Hi, You mean make float button appear on bottom right corner? 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
lauriking Posted May 10, 2022 Share Posted May 10, 2022 @tuanphan I hesitate to ask you any more questions because you are so lovely in answering all of our queries - for free! THANK YOU SO MUCH. I have used the code and it works brilliantly - thank you (talkingheads.co.uk/seotranslation). However on the button, the link is only active at the right hand side of the button - could the link cover the whole button? Thanks! Link to comment
humxahafeex Posted May 10, 2022 Share Posted May 10, 2022 1 hour ago, cannonball said: @tuanphan I hesitate to ask you any more questions because you are so lovely in answering all of our queries - for free! THANK YOU SO MUCH. I have used the code and it works brilliantly - thank you (talkingheads.co.uk/seotranslation). However on the button, the link is only active at the right hand side of the button - could the link cover the whole button? Thanks! Hi Yes you can fix it by adding the following code to DESIGN>CUSTOM CSS .t-button { z-index: 9 !Important; } Please do mark it solved if it works. lauriking and tuanphan 1 1 Link to comment
lauriking Posted May 23, 2022 Share Posted May 23, 2022 On 5/10/2022 at 3:08 PM, humxahafeex said: Hi Yes you can fix it by adding the following code to DESIGN>CUSTOM CSS .t-button { z-index: 9 !Important; } Please do mark it solved if it works. Thanks so much! Link to comment
Sbenjamin Posted October 13, 2022 Share Posted October 13, 2022 @tuanphanI have a question about the animation of the button on my page, I have added the button as per the code you have provided and it worked great. If it is possible I would like the button to reveal further down the page after our Book now button in the header is out of view. https://www.katmaifishingguides.com/ Link to comment
tuanphan Posted October 17, 2022 Share Posted October 17, 2022 On 10/14/2022 at 3:46 AM, Sbenjamin said: @tuanphanI have a question about the animation of the button on my page, I have added the button as per the code you have provided and it worked great. If it is possible I would like the button to reveal further down the page after our Book now button in the header is out of view. https://www.katmaifishingguides.com/ Hi, I don't see Book now button 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
Sbenjamin Posted October 19, 2022 Share Posted October 19, 2022 On 10/16/2022 at 9:21 PM, tuanphan said: Hi, I don't see Book now button It should be there now, lower right. It reads "book a trip" Link to comment
tuanphan Posted October 23, 2022 Share Posted October 23, 2022 On 10/19/2022 at 7:18 PM, Sbenjamin said: It should be there now, lower right. It reads "book a trip" You want Scroll down, when users can't see book a trip on header, the float book a trip will appear? 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
amleto1990 Posted May 11, 2023 Share Posted May 11, 2023 (edited) On 1/16/2022 at 10:26 PM, tuanphan said: With 5 buttons, try this code <a href="https://beaverhero.com" class="t-button">Button Text 1</a> <a href="https://beaverhero.com" class="t-button button2">Button Text 2</a> <a href="https://beaverhero.com" class="t-button button3">Button Text 3</a> <a href="https://beaverhero.com" class="t-button button4">Button Text 4</a> <a href="https://beaverhero.com" class="t-button button5">Button Text 5</a> <style> .t-button { display: inline-block; background: green; color: white; padding: 1em 2em; border-top-left-radius: 10px; border-bottom-left-radius: 10px; position: fixed; top: 50%; right: 0; } .button2 { top: calc(50% + 50px); } .button3 { top: calc(50% + 100px); } .button4 { top: calc(50% + 150px); } .button5 { top: calc(50% + 200px); } @media screen and (max-width:767px) { .t-button {display: none !important;} } </style> If it doesn't work, please share link to your site Hi, I used this on my website but the links are not active. Does this no longer work? Also does not show up on mobile. jouleseventeen.com/honey Edited May 11, 2023 by amleto1990 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