Jump to content

Floating button

Recommended Posts

Can you try this, Settings->Design->Custom Css

@media only screen and (max-width: 1024px) and (pointer: coarse), screen and (max-width: 799px) {
  .header--menu-open .header-display-desktop {
      display: none;
  }
  .header-display-desktop {
      display: block;
      position: absolute;
      width: auto;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999999;
  }
  .header-display-desktop .header-title-nav-wrapper {
    display: none;
  }
  .header-display-desktop .header-nav,
  .header-display-desktop .header-burger {
    display: none
  }
  .header-display-desktop .header-actions.header-actions--right {
    display: block;
  }
  .header-display-desktop .header-actions-action--cta {
    display: block;
  }
}

image.png.3498dc70251c38ffb80c528df4ca7228.png

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
48 minutes ago, RachC said:

Hi,

I can see it now which is great, when I click on it however it doesn't take me to the booking page I have which is www.omegaphysio.co.uk/booknow

 

Thank you for your help so far.

I just update the z-index, please check and let me know

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@RachCWe took a quick check & found some other problems on your site. Here all + code to fix.

1. (Mobile) footer logo is big, blurry, you can add this to Design > Custom CSS to resize it.

/* resize footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1601019351984_18982 {
    width: 50%;
}
}

2. (Mobile) Home page & some pages have long content, you can consider adding a back to top button.

There are some free code on forum, you can search.

3. (Tablet) Homepage. Some text is a bit narrow: Get in touch form, Home visits, Our services, Building a better you.

If you need to increase width, just let me know, we will give the code.

4. (Tablet) Footer right column is narrow, look ugly.

Add this to Design > Custom CSS to increase right column width

/* Footer columns width */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f48d7cac568965e81b740e4 .span-5 {
    width: 33%;
}
div#page-section-5f48d7cac568965e81b740e4 .span-2 {
    width: 20%;
}
}

image.thumb.png.64408eb44044065869e950654b3b7228.png

 

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
4 hours ago, RachC said:

Hi @tuanphan

 

Thank you for the suggestions. When adding the codes into CSS, do I copy them straight after existing codes that I already have in there? Forgive me if this sounds silly, I'm very new to this!

Yes.

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
  • 1 year later...
On 11/5/2020 at 6:24 AM, RachC said:

Hi,

I can see it now which is great, when I click on it however it doesn't take me to the booking page I have which is www.omegaphysio.co.uk/booknow

 

Thank you for your help so far.

 

On 11/4/2020 at 9:21 PM, bangank36 said:

Can you try this, Settings->Design->Custom Css

@media only screen and (max-width: 1024px) and (pointer: coarse), screen and (max-width: 799px) {
  .header--menu-open .header-display-desktop {
      display: none;
  }
  .header-display-desktop {
      display: block;
      position: absolute;
      width: auto;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999999;
  }
  .header-display-desktop .header-title-nav-wrapper {
    display: none;
  }
  .header-display-desktop .header-nav,
  .header-display-desktop .header-burger {
    display: none
  }
  .header-display-desktop .header-actions.header-actions--right {
    display: block;
  }
  .header-display-desktop .header-actions-action--cta {
    display: block;
  }
}

image.png.3498dc70251c38ffb80c528df4ca7228.png

I don't see anywhere in your HTML code a reference to the destination of the button - which was www.omegaphysio.co.uk/booknow. So not sure exactly how to apply this to our situation/site. Thanks.

Link to comment
2 hours ago, RedSkyMX said:

 

I don't see anywhere in your HTML code a reference to the destination of the button - which was www.omegaphysio.co.uk/booknow. So not sure exactly how to apply this to our situation/site. Thanks.

Hi @RedSkyMX,

Try it in Home > Design > Custom Css and let me know if it works properly on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
18 hours ago, bangank36 said:

Hi @RedSkyMX,

Try it in Home > Design > Custom Css and let me know if it works properly on your site

So literally just paste the following code into the location you specified, with no modifications?

 

@media only screen and (max-width: 1024px) and (pointer: coarse), screen and (max-width: 799px) {
  .header--menu-open .header-display-desktop {
      display: none;
  }
  .header-display-desktop {
      display: block;
      position: absolute;
      width: auto;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999999;
  }
  .header-display-desktop .header-title-nav-wrapper {
    display: none;
  }
  .header-display-desktop .header-nav,
  .header-display-desktop .header-burger {
    display: none
  }
  .header-display-desktop .header-actions.header-actions--right {
    display: block;
  }
  .header-display-desktop .header-actions-action--cta {
    display: block;
  }
}
Link to comment
18 hours ago, bangank36 said:

Hi @RedSkyMX,

Try it in Home > Design > Custom Css and let me know if it works properly on your site

I pasted the code in, and when in mobile view, there is no button. Nothing appears any different. I pasted the code where you instructed. The URL is hotelcielorojo.com. Thanks in advance for any help you can provide.

Link to comment

Hi @RedSkyMX,

The idea we implement is using the Button Book in desktop visible on mobile, then set it to the right position on mobile

@media only screen and (max-width: 639px) {
  .Header--bottom {
    display: block;
  }
  .Header-inner--bottom[data-nc-group="bottom"] {
    display: block;
  }

  [data-nc-container="bottom-left"] {
    display: none !important;
  }

  [data-nc-container="bottom-center"] {
    display: none !important;
  }

  [data-nc-container="bottom-right"] {
    display: block;
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 9999999;
    transform: translateX(-50%);
  }
}

You can use the above Css code to apply the idea i suggest

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
20 minutes ago, bangank36 said:

Hi @RedSkyMX,

The idea we implement is using the Button Book in desktop visible on mobile, then set it to the right position on mobile

@media only screen and (max-width: 639px) {
  .Header--bottom {
    display: block;
  }
  .Header-inner--bottom[data-nc-group="bottom"] {
    display: block;
  }

  [data-nc-container="bottom-left"] {
    display: none !important;
  }

  [data-nc-container="bottom-center"] {
    display: none !important;
  }

  [data-nc-container="bottom-right"] {
    display: block;
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 9999999;
    transform: translateX(-50%);
  }
}

You can use the above Css code to apply the idea i suggest

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Is there anything I need to do to the code above to make it specific and applicable to my situation ?

Are their any other settings or anything else at all in any other code I need to change? Or changes to names of buttons?
 

Or is the only changes I need to make,  is simply and solely to paste the code above in?

And is the only place I need to add the code to Home > Design > Custom Css?
 
thanks!!!!
Link to comment
7 minutes ago, RedSkyMX said:

Is there anything I need to do to the code above to make it specific and applicable to my situation ?

Are their any other settings or anything else at all in any other code I need to change? Or changes to names of buttons?
 

Or is the only changes I need to make,  is simply and solely to paste the code above in?

And is the only place I need to add the code to Home > Design > Custom Css?
 
thanks!!!!

Hi @RedSkyMX

These codes is for your site: hotelcielorojo.com

This is my testing result after applying them

image.png.a50765fae60e7a97a68070b70a1f7054.png

Hope it can help you

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

I mean that you just need to update them in your Custom Css

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 hours ago, bangank36 said:

I mean that you just need to update them in your Custom Css

I just realized this (having the "book now" button at the top of the mobile screen) works on the home page, but not on all of the other pages.

Specifically, it works on three of the pages: home page, Events and Gallery. But it does not work on "The hotel", "Bistro Organico" and Pueblo pages.

How is this possible? I just added the code into one place.

Thank you!

Edited by RedSkyMX
left out info
Link to comment
56 minutes ago, RedSkyMX said:

Hope you saw my last message. It isn’t working on all pages. Any advice you could offer will be appreciated. Thanks

Hi,

You can try replace my previous codes with the following ones

@media only screen and (max-width: 767px) {
	.Header--bottom {
		display: block;
	}
	.Header-inner--bottom[data-nc-group="bottom"] {
		display: block;
	}
	[data-nc-container="bottom-left"] {
		display: none !important;
	}
	[data-nc-container="bottom-center"] {
		display: none !important;
	}
	[data-nc-container="bottom-right"] {
		display: block;
		position: fixed !important;
		top: 16px;
		left: 50%;
		z-index: 9999999;
		transform: translateX(-50%);
		a.Header-nav-item {
			background: red;
			color: red !important;
			background: transparent !important;
			border-color: #bd1300 !important;
			&:hover {
				color: #fff !important;
				background: #bd1300 !important;
				border-color: #fff !important;
			}
		}
	}
	.tweak-mobile-bar-top-fixed {
		.Mobile-bar--top {
			z-index: 999;
		}
	}
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
53 minutes ago, bangank36 said:

Hi,

You can try replace my previous codes with the following ones

@media only screen and (max-width: 767px) {
	.Header--bottom {
		display: block;
	}
	.Header-inner--bottom[data-nc-group="bottom"] {
		display: block;
	}
	[data-nc-container="bottom-left"] {
		display: none !important;
	}
	[data-nc-container="bottom-center"] {
		display: none !important;
	}
	[data-nc-container="bottom-right"] {
		display: block;
		position: fixed !important;
		top: 16px;
		left: 50%;
		z-index: 9999999;
		transform: translateX(-50%);
		a.Header-nav-item {
			background: red;
			color: red !important;
			background: transparent !important;
			border-color: #bd1300 !important;
			&:hover {
				color: #fff !important;
				background: #bd1300 !important;
				border-color: #fff !important;
			}
		}
	}
	.tweak-mobile-bar-top-fixed {
		.Mobile-bar--top {
			z-index: 999;
		}
	}
}

 

Your latest code worked on all pages. The only remaining issue is that if you access the menu from the burger on the right, when the menu opens, the "book now" is still at the top, which looks a little odd. There is also the "book now" choice at the bottom of that menu, which ideally would be the button, instead of just text. With no button on top while the menu is open. 

Also...any advice on how to get rid of all the white space above and below the YouTube video on our home page? The space isn't there on desktop. Just on mobile.

Edited by RedSkyMX
Link to comment
On 11/22/2021 at 9:54 PM, RedSkyMX said:

Your latest code worked on all pages. The only remaining issue is that if you access the menu from the burger on the right, when the menu opens, the "book now" is still at the top, which looks a little odd. There is also the "book now" choice at the bottom of that menu, which ideally would be the button, instead of just text. With no button on top while the menu is open. 

Also...any advice on how to get rid of all the white space above and below the YouTube video on our home page? The space isn't there on desktop. Just on mobile.

#1. It looks like you figured it out?

#2. Did you remove Youtube video?

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.