Coding a Floating 'Book now' image

Site URL: https://www.virtuallygolf.co.uk/

Hi All

Very new to Square space and need to add an image 'png' file (attached) which floats from top to bottom as you scroll up and down the website.

Also this image will need to be able to link to another page for customers to click on. 

Is this possible and how?

Thank you

You can add an Image Block with link in Site Footer, then we can give code to make it float

Thank you, I've added the image to the footer with link.  What code can we use to make it float up and down the site as customers scroll?

Great, thank you

Hi, the image is rather temperamental and is sometimes visible and other times not.  Is there a way to make sure it is constantly on screen and visible. 

website: www.virtuallygolf.co.uk

Image is with link in footer (block-yui_3_17_2_1_1662648844311_924264) and code below in custom CSS to make it float:-

Line: 572

Code: 

div#block-yui_3_17_2_1_1662648844311_924264 {
    position: fixed;
    left: 245px;
    top: 10%;
    max-width: 128px;
    transform: translateY(-50%);
    z-index: 9999999;
}
footer.sections {
    z-index: 9999999 !important;
}

Thank you

17 hours ago, VirtuallyGolf said:

Hi, the image is rather temperamental and is sometimes visible and other times not.  Is there a way to make sure it is constantly on screen and visible. 

 

website: www.virtuallygolf.co.uk

Image is with link in footer (block-yui_3_17_2_1_1662648844311_924264) and code below in custom CSS to make it float:-

Line: 572

Code: 

div#block-yui_3_17_2_1_1662648844311_924264 {
    position: fixed;
    left: 245px;
    top: 10%;
    max-width: 128px;
    transform: translateY(-50%);
    z-index: 9999999;
}
footer.sections {
    z-index: 9999999 !important;
}

 

Thank you

Image shows fine to me. Can you describe in more detail?

Yes I've changed the image and it seems to be ok.  However, now when I hover over images with links (desktop or mobile)  some don't work on the image but just to the side.

Is there a reason why some images would do this?

A good example is the floating images on the left of the website.  Christmas button only seem to work if you tap to the right, corporate button is fine and Booking Page button doesn't seem to work at all.  All have links to them.  This happens on most pages, some work and some don't.

Website: www.virtuallygolf.co.uk

On 9/28/2022 at 4:18 PM, VirtuallyGolf said:

Yes I've changed the image and it seems to be ok.  However, now when I hover over images with links (desktop or mobile)  some don't work on the image but just to the side.

 

Is there a reason why some images would do this?

 

A good example is the floating images on the left of the website.  Christmas button only seem to work if you tap to the right, corporate button is fine and Booking Page button doesn't seem to work at all.  All have links to them.  This happens on most pages, some work and some don't.

 

Website: www.virtuallygolf.co.uk

 

You can remove space inside images

eg this

Thank you for this, all seems to be working now.

Is it possible to only allow the 'Book Now' image to appear on certain pages?  I need to disable it on the pages:

Booking page and Members Page

On 11/14/2022 at 6:20 PM, VirtuallyGolf said:

Thank you for this, all seems to be working now.

 

Is it possible to only allow the 'Book Now' image to appear on certain pages?  I need to disable it on the pages:

Booking page and Members Page

Add to 2 Pages Header 

<style>
  div#block-4bf0d701df8a3bc965d5 {
    display: none !important;
}
</style>