How to change the "Back-to-top" button position?

This topic has 10 replies, 2 voices, and was last updated 6 years ago ago by Rose Tyler

  • Avatar: Graham
    Graham
    Participant
    October 25, 2018 at 06:40

    Hello, dear support

    I’m having an added cart basket icon located at the right bottom corner – which conflicts with the original “Back-to-top” button.

    >>>>Issue Screenshot: https://ibb.co/bNM0DA
    >>>>Screenshot of the normal version: https://ibb.co/g8KsRV
    ——————————————————
    1) I would just like to know how can I move it up a little bit to locate above the cart icon?
    2) And can you pls let me know if it is possible to shrink the size a little bit?
    3) If it is controlled by the CSS, I assume I can also change its color by custom CSS?
    ——————————————————

    Thank you very much in advance
    Regards
    Graham

    Please, contact administrator
    for this information.
    9 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 25, 2018 at 12:51

    Hello,

    Please try to use this custom css code:

    .back-top {
        background-color: #f22f5d;
    }
    .back-top {
        bottom: 100px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    .back-top span:before {
        color:  white;
        line-height:  1;
    }
    

    Regards

    Avatar: Graham
    Graham
    Participant
    October 26, 2018 at 07:09

    Hello, unfortunately

    After applying the code, it doesn’t seem to work yet:

    .back-top {
    bottom: 100px;
    right: 20px;
    width: 40px;
    height: 40px;
    }

    And here is the screenshot of how it looks after the change:
    https://ibb.co/iP9kGV

    Could you have a check, please?
    Regards
    Graham

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 26, 2018 at 08:18

    Hello,

    Please try this code https://prnt.sc/laml4z

    .back-top {
        background-color: #f22f5d !important;
    }
    .back-top {
        bottom: 100px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    .back-top span:before {
        color:  white !important;
        line-height:  1 !important;
    }

    Regards

    Avatar: Graham
    Graham
    Participant
    October 26, 2018 at 10:04

    Amazing! It’s working now.

    Sorry I thought the other codes were to change the color only.

    Thanks very much. 🙂
    Cheers
    Graham

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 26, 2018 at 10:09

    You’re welcome!

    Regards

    Avatar: Graham
    Graham
    Participant
    October 27, 2018 at 10:50

    Hello again, Tyler

    Sorry to bother again, but I have just found a weird icon has appeared between the “Quantity” spinner.

    Screenshot: https://ibb.co/eGoDMV

    Can you pls kindly have a check and let me know how to fix it?

    Regards
    Graham

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 29, 2018 at 09:03

    Hello,

    Sorry for the delay due to the weekends.
    What browser do you use? Make sure that version of your browser is not very old.

    Regards

    Avatar: Graham
    Graham
    Participant
    October 29, 2018 at 14:35

    Hi Tyler,

    The problem is found with the Firefox browser, I do have cleared the cache on the backend, and refreshed the page but the problem still exists.

    But I think it’s no big issue, we’ll leave this problem to the next updates of the Firefox browser and see how’s it going

    Thank you 🙂
    Regards

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 29, 2018 at 14:39

    Hello,

    I do not have this problem in Firefox 62.0.3 version.
    Feel free to ask if you have any other questions.

    Regards

  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.