Adding sticky buttons fixed to the bottom of a page in Avada

sticky-buttons-functions.php

// Add this code to your child theme's functions.php file.

/**
 * Sticky Buttons Fixed to the Bottom of the Page
 */
function add_sticky_buttons() {
	echo '
<div class="sticky-btn-wrapper">
<a href="#showcase" class="btn sticky-btn sticky-btn__left">Sticky 1</a>
<a href="#section-b" class="btn sticky-btn sticky-btn__right">Sticky 2</a>
</div>
	';
}
add_action('avada_footer_copyright_content', 'add_sticky_buttons');

sticky-buttons-style.css

/** Add this to your child theme's style.css file. */

/** Sticky Stuff */

.btn {
  display: inline-block;
  background: #333;
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
  border: 1px solid #666;
  margin: 0.5em 0;
  opacity: 0.9;
}

.btn:hover {
  background: #eaeaea;
  color: #333;
}

.sticky-btn-wrapper {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}

.sticky-btn {
  width: 50%;
  margin: 0;
}

.sticky-btn__left {
  background-color: darkblue;
}

.sticky-btn__right {
  background-color: firebrick;
}

/* Hide the sticky buttons for wide devices. */
@media screen and (min-width: 768px) {
  .sticky-btn, .sticky-btn-wrapper {
    display: none;
  }
}

/* Extra bottom padding for the sticky buttons on mobile. */
@media all and (max-width: 767.998px) {
  footer {
    padding-bottom: 5em;
  }
}

Hi Mark,

Thanks for creating this php hook - I've implemented it and was scratching my head as to why it wouldn't work, then I realised you're using the content copyright footer to append it too...

However, with the new Avada update - all my footers are handled through the global layout / element builder for more control... This by default turns off the 'avada_footer_copyright_content' option.

When I disabled my footer layout and went back to the OG footer it worked a charm. However, I really want to keep using the new footer layout - can you suggest an edit to the php add_action first argument to fix my issue?

Sorry if it's an obvious fix PHP is my weakest language 🥲

I hope you can help, thanks in advance! :)

Hi @hdurdan,

I saw your post on the Avada forum. I'm glad you found the hook that works for you.

If you're interested, I put together a minimalist visual of where some of the header and footer hooks show up on an Avada page. See the gist here.

https://gist.github.com/marklchaves/9e8e6cfc6d59d140e5b044679c82756f

Cheers!

Mark