Adding a Floating Button for "Contact" visible on mobile only?

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!

You can add a Button Block on Footer. Then we will give the code to make it float on mobile only.

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?

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)

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;
}
}

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.

@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)

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?

@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! 🙂

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;
}

@tuanphan Thank you, it's worked! That only issue now is the cart has doubled?

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?

@tuanphan apologies - try this link:
https://cosmo-fluid.squarespace.com/ password = pearler