[Resolved] generate-back-to-top relative to container width

Home Forums Support [Resolved] generate-back-to-top relative to container width

Home Forums Support generate-back-to-top relative to container width

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1594534
    Jeff

    I want the back-to-top graphic to be on the right side of the constrained width of the site, not the entire viewport of the browser. I have a max width of 780px on the site, so if the viewport is larger than this the back-to-top slides off of the site. Any suggestions?

    #1594536
    Jeff

    Ha ha, after looking a lot, i just found this answer to this question right after I posted it.

    https://generatepress.com/forums/topic/moving-back-to-top-button/

    #1594537
    Jeff

    Mark as closed

    #1594540
    Jeff

    Sorry, closed this too early. With the changes to the code, the back-to-top only appears once one scrolls all the way down the page, instead of appearing after one scrolls a bit. I’d like the original functionality, just change the horizontal location so it is over the footer (which I’ve set a max width to).

    #1595018
    Leo
    Staff
    Customer Support
    #1595063
    Jeff

    Not really, because the problem is that relative to the edge of the viewport is not what is needed, but rather relative to the footer/footer bar. The problem comes with the fix from this post: https://generatepress.com/forums/topic/moving-back-to-top-button/ is that the back-to-top doesn’t show up until all the way at the bottom.

    #1595281
    Ying
    Staff
    Customer Support

    Hi Jeff,

    Try this css:

    .site-footer {
        position: relative;
    }
    
    .generate-back-to-top,
    .generate-back-to-top:visited {
        left: 50%;
        transform: translateX(400px);
    }
    #1595310
    Jeff

    Thank you. I’ve played with this and I think I need a media query. When the viewport is smaller than the width of the page, then this works:

    
    /* back to top */
    .site-footer {position: relative;}
    
    @media only screen and (max-width: 780px) {
    .generate-back-to-top,
    .generate-back-to-top:visited {
    transform: translate(20px,-50px);}}
    
    @media only screen and (min-width: 781px){
    .generate-back-to-top,
    .generate-back-to-top:visited {
    left: 50%;
    transform: translate(350px);}}
    

    The only thing I’d like to fix is that the back-to-top caret needs to be moved up a few pixels on the > 780 width. (so that it is not covering my sticky footer).

    Any suggestion on how to do that?

    #1595463
    David
    Staff
    Customer Support

    Hi there

    can you share a link to the site where we can see the issue ?

    #1595505
    Jeff
    #1596189
    Ying
    Staff
    Customer Support

    Hi Jeff,

    You could add bottom: 100px; to your css for desktop, and bottom: 50px; to the css for mobile.

    Let me know 🙂

    #1596522
    Jeff

    สวัสดีครับคุณหญิง

    This seems to work for me:

    
    /* back-to-top above footer*/
    .site-footer {position: relative;}
    @media only screen and (max-width: 768px) {
    .generate-back-to-top,
    .generate-back-to-top:visited {bottom:80px;transform: translate(28px);}}
    @media only screen and (min-width: 769px){
    .generate-back-to-top,
    .generate-back-to-top:visited {left:50%;
    bottom:80px;
    transform: translate(350px);}}
    

    ขอบคุณครับ

    #1598561
    Ying
    Staff
    Customer Support

    Great 🙂
    Glad it worked!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.