Back to Top button color

IFZA

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

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!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

IFZA

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

 Thanks!

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

IFZA

Thanks muffingroup, it works perfectly- 

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

tonytreacy

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

tonytreacy

Hi

http://polestarenergyconsultants.com/newsite/

Many thanks

Tony

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Astrophytum

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Astrophytum

Hello,

thank you for prompt helping, works fine for me.



Kind Regards,
Astrophytum

Albert

You are welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mymultimediatech

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

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

1039897909

how to change the color of Popup Contact Form?

Albert

@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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Benster-

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

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Benster-

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Benster-

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

To do this, please use the following css:

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Benster-

Great stuff, Thanks.
Excelent support by the way!

Albert

You're welcome!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

koderius

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

Bryan

@koderius Please send us a link to your website.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

koderius

never mind installed a plugin instead - thanks