Avada includes the ability to show a To the Top icon when a user scrolls down and it can be placed on the left or the right and appear to be floating. This is great for a lot of use cases, but maybe you want something different — I know I did.

The default settings are inconveniently located in two locations:

  • Layout option are located in Global Options > Extras > Miscellaneuos
  • The on and off and desktop and mobile or both script options are in Global Options > Advanced > Features

The easiest way to find them is just to type ToTop in the search bar.

Screenshot of the ToTop settings

Changing the appearance

In the case of this site, I wanted to incorporate several changes:

  • Change the appearance
  • Center it ion the bottom
  • Add text

Fortunately, all of these can be done with some custom CSS.

Changing the color

In order to change the color, the code is fairly straightforward. The ToTop is the ID associated with the button and you just need to apply the colors for the various states (normal, hover, active, and focus).

 #toTop {
    background-color: #ffd43b;
    width: auto;
    padding: 8px;
    color: #1b1b1b;
  }
  #toTop:hover {
    background-color: #75bffc !important;
    color: #1b1b1b !important;
  }
  #toTop:active, #toTop:focus {
    outline: 1px;
    background-color: #E4E8FB !important;
    color: #1b1b1b;
  }

Changing the position

Next, I wanted to center it on the bottom. I played around with this and could never get it to work just right. Since the positioning was either left or right and I had to pick one and then set it from there. I left it at the default”right” position. I found that setting the width of the button and then positioning at 50% of the viewport minus 50% of the width did the trick.

.to-top-right #toTop {
    right: calc(50vw - 65px);
    width: 130px;
    bottom: 0px;
    height: 40px;
    border-radius: 6px 6px 0 0 !important;
  }

Adding text

Lastly, I wanted to add text and a custom icon. Since I am already using Font Awesome as an icon font, this was fairly easy to implement.

 #toTop:after {
    line-height: 1.5;
    font-family: Poppins;
    font-weight:500;
    content: "To the Top";
    font-size: 14px;
    color: #1b1b1b;
  }
  #toTop:before {
    color: #1b1b1b;
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 500;
    content: "\f35b" !important;
    line-height: 1.5;
    font-size: 16px;
  }

While this is all fine and good, I did experience a few issues on mobile and decided to allow the default styling to be used there. That may change in the future.

All together now

The SCSS to make it happen.

/*to top button */
@media only screen and (min-width: 600px) {
  #toTop {
    &:after {
      line-height: 1.5;
      font-family: Poppins;
      font-weight: 500;
      content: "To the Top";
      font-size: 14px;
      color: #1b1b1b;
    }

    &:before {
      color: #1b1b1b;
      font-family: "Font Awesome 6 Pro" !important;
      font-weight: 500;
      content: "\f35b" !important;
      line-height: 1.5;
      font-size: 16px;
    }

    &.fusion-to-top-active {
      pointer-events: auto;
      opacity: 0.95;
      transition: opacity 0.4s ease-in-out, background 0.2s ease-in-out;
    }
  }

  .to-top-right #toTop {
    right: calc(50vw - 65px);
    width: 130px;
    bottom: 0px;
    height: 40px;
    border-radius: 6px 6px 0 0 !important;
  }

  #toTop {
    background-color: #ffd43b;
    width: auto;
    padding: 8px;
    color: #1b1b1b;

    &:hover {
      background-color: #75bffc !important;
      color: #1b1b1b !important;
    }

    &:active, &:focus {
      outline: 1px;
      background-color: #E4E8FB !important;
      color: #1b1b1b;
    }
  }
}

Originally published on Dec. 26, 2021

Plugin Recommendation: Scripts Organizer
man standing in front view of lake surrounded with mountainsEarth Share Copy

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023