Back to Top button color

IFZA · November 2015

Hi,

Can you let me know how can I change the color and position of Back to Top button .

Do share me the link if this is already addressed.. I searched few discussions and couldn't find the answer -

Thanks!!

Albert · November 2015

Hi,

please send us url to page where you want to change position and color of this button and we'll have a look on it.

Thanks!

IFZA · November 2015

here you go - http://www.maplesci.com/

Thanks!

Albert · November 2015

Ok. So to change it's color and position, please use below css:

.nice-scroll #Footer .footer_copy a#back_to_top.sticky { bottom: 0 !important; right: 20px !important; }
#Footer .footer_copy a#back_to_top.sticky { background: #000 !important; }
#Footer .footer_copy a#back_to_top.sticky .button_icon i { color: #FFF !important; }
#Footer .footer_copy a#back_to_top { border-color: #000 !important; }

IFZA · November 2015

Thanks muffingroup, it works perfectly-

Albert · November 2015

You're welcome

tonytreacy · March 2016

Hi,

I'm having a similar problem with changing the colour of the Scroll to top button. I have inserted the code above, changed the hex codes to ensure that I could see any changes.

But it did not work. I inserted the code into Custom CSS from the Theme Options menu.

I also, need to change the colour of the pop-out email button. Any suggestions would be greatly appreciated.

Many thanks

Tony

Albert · March 2016

@tonytreacy Any link to page where you used above css and it does not work?

tonytreacy · March 2016

Hi

http://polestarenergyconsultants.com/newsite/

Many thanks

Tony

Albert · March 2016

@tonytreacy Above css does not work for you because you use sticky back to top which is a different one. In your case, you should use the following css instead:

#back_to_top.sticky.scroll i { color: #000 !important; }
#back_to_top.sticky.scroll { background: #FFF !important; }

Astrophytum · September 2016

Hello,

the URL is: https://kakteenfreunde-kassel.de/

This CSS is integrated:

#back_to_top.sticky.scroll i { color: #7FB200 !important; }
#back_to_top.sticky.scroll { background: #7FB200 !important; }

I will change the background color and the color of the arrow.

Kind Regards,
Astrophytum

Albert · September 2016

Ok. So to change back to top colors in your case, you need to use the following css:

#back_to_top.sticky { background: #000 !important; }
#back_to_top.sticky i { color: #FFF !important; }

Astrophytum · September 2016

Hello,

thank you for prompt helping, works fine for me.

Kind Regards,
Astrophytum

Albert · September 2016

You are welcome

mymultimediatech · September 2016

How can I move the back to the top button a little higher?

Albert · September 2016

@mymultimediatech Please send us link to page where you would like to move it higher.

1039897909 · December 2016

how to change the color of Popup Contact Form?

Albert · December 2016

@1039897909 All details about changing it's color, you can find on http://forum.muffingroup.com/betheme/discussion/11153/change-color-button-popup-contact-form

Benster- · January 2017

The code mentioned above doesn't work on my page. Can you please tell me what I need to do?

Albert · January 2017

@Benster- Which one does not work exactly? Because we do not see any of above on your site.

Benster- · January 2017

Sorry, I have taken the css code of the site again after realizing that it didn't change my bacl-to-top button. Can you tell me which code is the right one to use to change the colour of my back-to-top button so that it matches the colour of the other buttons on the page?

Albert · January 2017

@Benster- If none of above works, please check the following css then:

#back_to_top i { color: #FFF !important; }
#back_to_top { background: #000 !important; }

Benster- · January 2017

That absolutely did the job, thanks.
One follow up question on this one: The arrow in the back-to-top button apears to be off center. Can you tell me how to optimize this?

Albert · January 2017

To do this, please use the following css:

#back_to_top .button_icon {
    padding: 10px !important;
}

Benster- · January 2017

Great stuff, Thanks.
Excelent support by the way!

Albert · January 2017

You're welcome!

koderius · March 2017

Hi for some reason the backto top button on my website doesnt work - instead of scrolling up - it only refershes the page .

Bryan · March 2017

@koderius Please send us a link to your website.

koderius · March 2017

never mind installed a plugin instead - thanks

Back to Top button color

Comments