Fixed tab on right of every page

Support
#1

Hi there,

I would love some help as to why my implementation of a fixed tab is not working? I would love to have this fixed tab, a simple link, on every page of my client’s site. I am currently testing it on the Contact page of my client’s site here: http://trinitycheltenham.com/contact/ but it’s not showing.

For reference, I am trying to copy the fixed tab which has the text: ‘Log in to My ChurchSuite’ on this site.

I have used Custom JS with the following code:

jQuery(document).ready(function($) {
  if( ! $('body').hasClass('page-id-48') ) {
$('<a href="https://mosaicleeds.churchsuite.co.uk" target="_blank" class="floating-button">Log in to My ChurchSuite</a>').appendTo('.site');
  }
});

With Custom CSS:

.page-id-48 .site .floating-button {
	position: fixed;
  top: 50%;
	right: 0;
  z-index: 1001;
  text-decoration: none;
  padding: 10px 20px;
  background: #FF675D;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: rotate(-90deg) translate3d(160px,0,0);
  transform: rotate(-90deg) translate3d(160px,0,0);
}

I can’t provide FTP or login details at this stage but I’m hoping it’s something quite simple that you can see from inspecting the page.

Thank you for your help in advance.

#2

Hi @ollietigs,

Thanks for reaching out.

Your javascript and CSS seems to contradict each other, this line if( ! $('body').hasClass('page-id-48') ) { says all pages except page with page-id-48. Then your CSS says .page-id-48 .site .floating-button to only apply it on page with page-id-48.

  1. If it’s meant to be displayed on all pages except on page page-id-48 then your javascript is correct, but the CSS selector should be like this

body:not(.page-id-48) .site .floating-button

  1. If it’s meant to be displayed on a specific page that has page-id-48 then the CSS is correct, but the javascript condition should be like this

if( $('body').hasClass('page-id-48') ) {

  1. If it’s meant to be displayed on all pages then both your CSS and javascript are wrong. It should be like these
jQuery(document).ready(function($) {
$('<a href="https://mosaicleeds.churchsuite.co.uk" target="_blank" class="floating-button">Log in to My ChurchSuite</a>').appendTo('.site');
});

.site .floating-button {
	position: fixed;
  top: 50%;
	right: 0;
  z-index: 1001;
  text-decoration: none;
  padding: 10px 20px;
  background: #FF675D;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: rotate(-90deg) translate3d(160px,0,0);
  transform: rotate(-90deg) translate3d(160px,0,0);
}

Without condition and page selector.

Hope this helps.

#3

Absolutely nailed it. Thanky ou so much for such brilliant help.

#4

You’re welcome. Glad we’re able to help.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.