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.