Increase size of Scroll Top Anchor and alter its position?

[JezUK]

Theme Pro,

I want to increase the size of the Scroll Top Anchor - I feel it’s too small and almost invisible.

Also, I want to change its position more away from the left and more away from the bottom.

Please can you advise ?

My website is; https://exteriorrenderings.co.uk

Many thanks.

[Prasant]

Hello @JezUK,

Thanks for asking.

You can add following CSS under Pro > Theme Options > CSS:

.x-scroll-top {
    width: 45px;
    height: 45px;
    font-size: 38px;
    left: 25px !important;
    bottom: 20px !important;
}

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.

[JezUK]

Hi Prasant,

That’s great thanks

I’ll take a look at those links, thank you

Many thanks.

[JezUK]

Actually, it’s not working - when you scroll right to the top, the Scroll Top Bar Icon should of course be no longer visible.

[friech]

Hi JezUK,

Please edit the custom CSS code given and remove the left and bottom property.

Remove this lines from the CSS code given.

left: 25px !important;
bottom: 20px !important;

Thanks,

[JezUK]

Hi Friech,

I’ve done that, but it is still partly visible.

Any other ideas please ?

[paul.r]

Hi,

You may change the value of bottom to adjust the position.

For example, try to change it to 100px.

.x-scroll-top {
    width: 45px;
    height: 45px;
    font-size: 38px;
    left: 25px !important;
    bottom: 100px !important;
}

Hope this hepls

[JezUK]

Hi Paul,

I was told not to put Left and Bottom in because by doing so, the icon remains visible even when the page is at the top.

(see your colleague’s previous comment, which was why I took it out).

Any other ideas ?

Thanks

[paul.r]

Hi,

Sorry about that, please find this code in your custom css

.x-scroll-top {
    width: 90px;
    height: 90px;
    font-size: 65px;
    color: #34aa45;
    border: 12px solid;
    opacity: 1;
    filter: alpha(opacity=100);
    zoom: 1;
}

Then change opacity to zero

.x-scroll-top {
    width: 90px;
    height: 90px;
    font-size: 65px;
    color: #34aa45;
    border: 12px solid;
    opacity: 0;
    filter: alpha(opacity=100);
    zoom: 1;
}

Thanks