Customize Back to Top button

You can find the “Back to top” button settings in Theme options > General settings, where you can change its location (left or right), or you can disable it.

The back top top button icon has the link website color by default (set in Theme option > Layout > Colors).

You can customize the style of back to top button using the class .back_to_top in CSS depending on your needs (you can add your code snippet into Theme options > Layout > Advanced > Custom css), for example:

.back_to_top {
background-color: #037ef3 !important;
color: #fff !important;
border-radius: 25% !important;
}

a.back_to_top.bg-gray-2:hover, button.back_to_top.bg-gray-2:hover {
background-color: #037ef3 !important;
color: #fff !important;
border-radius: 25% !important;
opacity: 0.75 !important;
} 

You can change the properties values above or add your own styling depending on your needs.

Change spacing between back to top button and the browser edges #

If the Back to Top location is set to “Right” on your website, you can change the default spacing between the back to top button and the right edge of the browser by adding the following code snippet into Theme options > Layout > Advanced > Custom css:

.back_to_top {
    right: 20px !important;
}

If the Back to Top location is set to “Left” on your website, you can change the default spacing between the back to top button and the left edge of the browser by adding the following code snippet into Theme options > Layout > Advanced > Custom css:

.back_to_top {
    left: 20px !important;
}

*You can change the 20px value depending on your needs.

Concerning the default spacing between the back to top button and the bottom edge of the browser, you can change it by adding the following code snippet into Theme options > Layout > Advanced > Custom css:

.back_to_top.active {
    bottom: 20px !important;
}

*You can change the 20px value depending on your needs.

Want to hide the back to top button on Mobile?

To hide the back to top button on mobile you can add this code snippet into Theme options > Layout > Advanced > Custom css:

@media (max-width: 540px) {
    .back_to_top {
        display: none !important;
    }
}