[Resolved] Move the "Back to Top Button" inside the main content container

[Sami]

On mobile, the button is very visible but on desktop, especially since screens are getting bigger the button is not so visible and easily reachable if it’s so far on the right or left. I tried to move it more in the middle but the position is fixed so it’s not an elegant solution because if the screen is smaller it will overlap the content.

I think the best solution would be to place it right next to the text, I made an example how it should look like, but I don’t know if that possible only with Css or if I have to trigger the button function with a custom hook:

[Leo]

Hi there,

You’d have to to something like this:
https://docs.generatepress.com/article/back-to-top-button/#moving-the-button

To deal with responsive issues, you will need to write more CSS using media query:
https://docs.generatepress.com/article/responsive-display/

[Sami]

That’s what I’ve tried but the CSS position is “fixed” which means the position of the button will move dependent on your screen size.

[Tom]

Hi there,

When something is position: fixed, it’s not possible to relate it to a specific element (like the content container). It’s always relative to the browser itself.

You could try using a percentage value for the right position though.

Something like this:

.generate-back-to-top, 
.generate-back-to-top:visited {
    right: 15%;
}

[Sami]

That’s a great idea, thank you Tom!

[Tom]

You’re welcome 🙂

[Author]

Posts