Themeco Community

Hi There,

Upon checking again it is disabled on your Customizer again. It should always be set to ON from Appearance > Customize > Footer > Scroll Top Anchor. To help you better, can you clarify what are the issue you have encountered after the previous CSS suggestion?

Hi there,

The scroll anchor button has fixed position and it covers part of your content that’s why we didn’t make it full width.

The code we provided in previous replies helped you to achieve the layout you want, so I don’t understand what the issue is?

In this replay https://community.theme.co/forums/topic/2-lines-of-text-in-the-footer/page/2/#post-1050164 you said :

When I hover over the Back to top area the arrow disappears and the whole bar is transparent and not a solid color

So it means that the issue was about hovering state, so I provided you with this replay https://community.theme.co/forums/topic/2-lines-of-text-in-the-footer/page/2/#post-1050171 to change hover state.

Would you please clarify why you remove all CSS code and want to start over?

Hope it helps.

Hi There,

Upon Reading the thread I believe you should add this code to your Appereance > Customizer > Custom > CSS

footer.x-colophon.bottom {
  padding-bottom: 70px;
}
.x-scroll-top.left {
    left: 0 !important;
}
body .x-scroll-top {
    width: 100%;
    border: 0;
    text-align: center;
    background-color: #000;
    border-radius: 0;
    height: auto;
    text-align: right;
    padding-right: 10px;
    color: red;
}
body .x-scroll-top:hover {
    color: #fff;
    background-color: #000;
    opacity: 1 !important;
}

Let us know how it goes

Thanks

Joao

Hello There,

Please update your css code block:

footer.x-colophon.bottom {
  padding-bottom: 70px;
}
.x-scroll-top.left {
    left: 0 !important;
}

body .x-scroll-top {
    border: 0;
    text-align: center;
    background-color: #000;
    border-radius: 0;
    height: auto;
    text-align: right;
    padding-right: 10px;
    color: red;
}
body .x-scroll-top:hover {
    color: #fff;
    background-color: #000;
    opacity: 1 !important;
}

body .x-scroll-top.in {
    opacity: 1;
}

Please let us know if this works out for you.

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body .x-scroll-top.right {
   right:0;
   width:100%;
   background-color:rgba(0,0,0,0.6);
}

Hope that helps.

Hello There,

Do you want something like this?

If that is the case, please make use of this code instead:

body .x-scroll-top.right {
   position: relative;
   right: auto;
   width:100%;
   background-color: rgba(0,0,0,1);
}

And if you want something big and at the center like this:

Please use this code instead:

body .x-scroll-top.right {
    right: auto;
    width: 100%;
    background-color: rgba(0,0,0,1);
    position: relative;
    text-align: center;
    font-size: 64px;
}

Hope this helps.

Hello Again,

To save you from trouble and to make the replies shorter, I went ahead and edited your site. I activated the footer widgets and added one widget area. I inserted a text widget and added this custom code in it:

<div class="cs-ta-center"><a class="back-to-top" href="#top" title="Back to Top">
    <i class="x-icon-angle-up" data-x-icon=""></i>
</a></div>

And then, I added a custom code in the customizer:

.x-colophon.top {
  padding-top: 0;
}

body .back-to-top {
  text-decoration: none;
  font-size: 64px;
  color: red;
}

body .back-to-top:hover {
  color: #fff;
}

What I’ve done is that, I’ve created a back to top link in your footer. This is to preserve the default scroll to top link on the side as you scroll the page.

Hope this would work out for you.

Great to hear it.

Let us know if you need help with anything else.

Joao