Centre Scroll to Top Button

[tomr96]

Hi there,

I have amended my CSS to change the colour and shape of the scroll to top button that appears, however I cannot seem to change the colour of the scroll icon in the middle nor can I centre the icon to be in the middle of the square - it looks to be slightly lighter grey and slightly higher arrow.

Static:

Hover:

I am using this:

.x-scroll-top.in {
margin-bottom: 0;
opacity: 0.75;
}

.x-scroll-top {
position: fixed;
z-index: 10000;
bottom: 10px;
width: 45px;
height: 45px;
margin-bottom: -75px;
border: 2px solid #000000;
font-size: 35px;
line-height: 27px;
text-align: center;
color: #00000; !important
border-radius: 0%;
%: ;
-webkit-transition: margin-bottom 0.6s ease,opacity 0.3s ease;
transition: margin-bottom 0.6s ease,opacity 0.3s ease;
}

.x-scroll-top:hover {
color: #000000;
}

I would appreciate any help.

Thanks, Tom.

[prakash_s]

Hi Tom,

Thanks for writing to us.

Replace your code with this code in theme option’s CSS.

.x-scroll-top.in {
margin-bottom: 0;
opacity: 1;
}

.x-scroll-top {
position: fixed;
z-index: 10000;
bottom: 10px;
width: 45px;
height: 45px;
margin-bottom: -75px;
border: 2px solid #000000;
font-size: 35px;
line-height: 27px;
text-align: center;
color: #000000 !important;
border-radius: 0%;
-webkit-transition: margin-bottom 0.6s ease,opacity 0.3s ease;
transition: margin-bottom 0.6s ease,opacity 0.3s ease;
}
.x-scroll-top:hover {
color: #000000;
}

.x-scroll-top .x-icon-angle-up {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks