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
PEARLERwork Posted August 23 Share Posted August 23 @tuanphan I've attempted the code above but unfortunately, it doesn't seem to work? I believe these codes used to work but maybe something has changed with Squarespace. https://www.emilywylde.co.uk/ (mobile footer button) 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
tuanphan Posted August 23 Share Posted August 23 8 hours ago, PEARLERwork said: @tuanphan I've attempted the code above but unfortunately, it doesn't seem to work? I believe these codes used to work but maybe something has changed with Squarespace. https://www.emilywylde.co.uk/ (mobile footer button) You mean hide Book a Project button on desktop? 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
PEARLERwork Posted August 28 Share Posted August 28 @tuanphan We love the header button being fixed in the corner on desktop. However we'd like it to do the same on mobile, but of course it's hidden inside the mobile menu! 🙂 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
tuanphan Posted August 30 Share Posted August 30 On 8/28/2023 at 9:42 AM, PEARLERwork said: @tuanphan We love the header button being fixed in the corner on desktop. However we'd like it to do the same on mobile, but of course it's hidden inside the mobile menu! 🙂 Use this CSS to make it appear on mobile .header-actions.header-actions--right, .header-actions.header-actions--right div { display: block !important; } body.header--menu-open header#header .header-menu-cta { visibility: hidden; } 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
PEARLERwork Posted September 22 Share Posted September 22 @tuanphan Thank you, it's worked! That only issue now is the cart has doubled? 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ Link to comment
tuanphan Posted September 25 Share Posted September 25 On 9/22/2023 at 9:31 AM, PEARLERwork said: @tuanphan Thank you, it's worked! That only issue now is the cart has doubled? I see you disabled cart. Do you still need help? 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
PEARLERwork Posted September 25 Share Posted September 25 @tuanphan apologies - try this link: https://cosmo-fluid.squarespace.com/ password = pearler 𝓚𝓪𝓽𝓲𝓮 ✦✦ ⓅⒺⒶⓇⓁⒺⓇ.ⓌⓄⓇⓀ ➸ 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