By Stephen Walker

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 December 26, 2021

share the article

Leave a Reply

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

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.