- This topic has 12 replies, 4 voices, and was last updated 3 years, 3 months ago by Ying.
-
AuthorPosts
-
December 26, 2020 at 2:30 am #1594534Jeff
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?
December 26, 2020 at 2:34 am #1594536JeffHa 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/
December 26, 2020 at 2:34 am #1594537JeffMark as closed
December 26, 2020 at 2:44 am #1594540JeffSorry, 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).
December 26, 2020 at 10:46 am #1595018LeoStaffCustomer SupportHi there,
Is this what you are looking for?
https://docs.generatepress.com/article/back-to-top-button/#moving-the-buttonDecember 26, 2020 at 11:28 am #1595063JeffNot 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.
December 26, 2020 at 8:10 pm #1595281YingStaffCustomer SupportHi Jeff,
Try this css:
.site-footer { position: relative; } .generate-back-to-top, .generate-back-to-top:visited { left: 50%; transform: translateX(400px); }
December 26, 2020 at 9:25 pm #1595310JeffThank 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?
December 27, 2020 at 4:31 am #1595463DavidStaffCustomer SupportHi there
can you share a link to the site where we can see the issue ?
December 27, 2020 at 5:31 am #1595505December 27, 2020 at 8:29 pm #1596189YingStaffCustomer SupportHi Jeff,
You could add
bottom: 100px;
to your css for desktop, andbottom: 50px;
to the css for mobile.Let me know 🙂
December 28, 2020 at 3:26 am #1596522Jeffสวัสดีครับคุณหญิง
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);}}
ขอบคุณครับ
December 29, 2020 at 10:21 am #1598561YingStaffCustomer SupportGreat 🙂
Glad it worked! -
AuthorPosts
- You must be logged in to reply to this topic.