katelyn.benton Posted February 4, 2022 Share Posted February 4, 2022 Site URL: https://www.healthcontentcollective.com Hi all, I want to add a floating "contact" button to this site (mobile only). I've been digging around on the internet looking for the css but haven't found anything that works yet. Can anyone provide some direction? www.healthcontentcollective.com Very much appreciated! Link to comment
tuanphan Posted February 8, 2022 Share Posted February 8, 2022 You can add a Button Block on Footer. Then we will give the code to make it float on mobile only. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
katelyn.benton Posted February 10, 2022 Author Share Posted February 10, 2022 On 2/8/2022 at 3:57 AM, tuanphan said: You can add a Button Block on Footer. Then we will give the code to make it float on mobile only. Awesome! I added the button to the footer, do you know the code I can use to make it float on mobile only? Link to comment
Caroline_Smith Posted February 12, 2022 Share Posted February 12, 2022 (edited) Here is a blog post that has a CSS code snippet and video tutorial for how to do this on 7.1 templates: https://blog.tawfiq.me/how-to-add-a-button-to-mobile-header-between-logo-and-menu-icon-squarespace/ If you are looking for something a little more robust that lets you add up to 3 visible menu items on mobile devices, I have a plugin available on my website that does just that! (this is not an affiliate link - I created the plugin myself) Edited February 12, 2022 by Caroline_Smith tuanphan 1 Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
tuanphan Posted February 14, 2022 Share Posted February 14, 2022 On 2/11/2022 at 4:46 AM, katelyn.benton said: Awesome! I added the button to the footer, do you know the code I can use to make it float on mobile only? Add to Design > Custom CSS div#block-yui_3_17_2_1_1644529381809_7144 a { position: fixed; bottom: 2vw; right: 2vw; z-index: 9999; display: none; } @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1644529381809_7144 a { display: block !important; } } katelyn.benton 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
katelyn.benton Posted February 14, 2022 Author Share Posted February 14, 2022 19 hours ago, tuanphan said: Add to Design > Custom CSS div#block-yui_3_17_2_1_1644529381809_7144 a { position: fixed; bottom: 2vw; right: 2vw; z-index: 9999; display: none; } @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1644529381809_7144 a { display: block !important; } } Thank you! This worked perfectly. 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