Scroll up button location and size across the page and across the frame

Support
#1

I’m trying to get the Scroll up button at the bottom corner of my page to come up sooner when scrolling down, be larger, and more centrally located as well as get rid of the circle behind the logo. I’d like it to be 30px up from the bottom left corner and 30 px out from the left edge. I’d also like to have the button come up when it’s only 20% of the way down the page.

#2

Hi there,

Please go to X > Launch > Options > Miscellaneous and set the options as the screenshot below:

Thank you.

#3

Ok, so first of all the screenshot doesn’t show the setting that I actually needed to change (but I figured it out) and this really didn’t answer my question about how to change the size of the icon nor get rid of the circle in the background. Could you please help me find the right css to change these things. Thank you

#4

Hi,

To achieve that, you can add this in Theme Options > CSS

.x-scroll-top {
    border:0;
    bottom:30px;
}

.x-scroll-top.right {
    right: 30px;
}

.x-scroll-top i:before {
    font-size:50px;
}

Hope that helps.

#5

I was able to get the css to work for some of it, but it had to be placed on the individual page not in the global settings. Can you tell me what the code didn’t take on the customizer css?

Also, how can I get the black circle in the background of the scroll up button to go away? I was able to change the icon but the background still exists.

Thanks for the help.

#6

Hey There,

The code did not work in the global css because you have inserted a broken code.

The correct one should be:

#obj3 .x-face-button {
	background-color: transparent!important; 
	height: 100%;
	width: 100%;
}

.x-scroll-top.right {
    left: 10px;
}
  
.x-scroll-top.right.x-scroll-top-custom {
    position: static;
    float: none;
    display: inline-block;
}
  
 .x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
	box-shadow: inset 0 4px 0 0 blue;
}

It is best that you indent your code and have a double line between each blocks.

And to remove the circle, simply add border: none; to the code.

.x-scroll-top {
    border:0;
    bottom:30px;
    border: none;
}

.x-scroll-top.right {
    right: 30px;
}

.x-scroll-top i:before {
    font-size:50px;
}

Please let us know if this works out for you.

#7

Wow, I botched that one. Thank you for the help.

#8

You’re welcome!
We’re glad we were able to help you out.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.