Floating button

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

Hi,

My book now button on my site is visible on web browser but disappears on mobile app. Thinking of adding the same button but as a floating option if that would solve the problem? So it is visible as people scroll. How do I go about doing this?

Thanks in advance!

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

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.

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

Thank you so much, it's working now!

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

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!

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.

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

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.

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

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

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.

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

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?

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

Hope it can help you

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

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!

21 hours ago, bangank36 said:

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

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

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

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.

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?