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.

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;
    }
}