[Support request] Change the scroll to top button

[Richard]

I followed the instructions here:

https://docs.generatepress.com/article/back-to-top-button/

I edited the css. Not sure why it’s not working.

[David]

Hi there,

what changes are you trying to make?

[Richard]

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

[David]

You can edit them in Customizer > Colors > Footer

[Richard]

I did that but I think something is overriding it.

[David]

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

[Richard]

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.

[David]

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.

[Richard]

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

[David]

!important is the blockbuster approach 🙂
Glad to be of help

[Author]

Posts