Change the scroll to top button

Hi there,

what changes are you trying to make?

The colors for the background (the box itself) and the arrow.

You can edit them in Customizer > Colors > Footer

I did that but I think something is overriding it.

Urgh ... some Elementor kit CSS is ie. this:

body.elementor-kit-14 a {
    color: #00C2FF;
    font-family: "Fira Sans", fira sans;
}

body.elementor-kit-14 a:hover {
    color: #151B3F;
}

If you can't change that then use this CSS to override it:

.generate-back-to-top, .generate-back-to-top:visited {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
.generate-back-to-top:hover, .generate-back-to-top:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
}

I did use that css code to override it

.generate-back-to-top,
.generate-back-to-top:visited {
    background-color: #50E3C2;
    color: #151B3F;
}

.generate-back-to-top:hover,
.generate-back-to-top:focus {
    background-color: #50E3C2;
    color: #fafafa;

However, the color of the arrow doesn't seem to change.

The code i provided here:

https://generatepress.com/forums/topic/change-the-scroll-to-top-button/#post-1386134

has the !important statement which override the elementor code.
Use my code and change the colors to suit.

Ah it must've been !important. I guess that overrides it. Thanks!

!important is the blockbuster approach :)
Glad to be of help