Can I change "Back to top" position ?

[SPyofgame]

Sometimes the Back to the top covers my text when reading and kinda annoying

Can I somehow make it align on the top (aka the Navigation Panel) ?

[squidfunk]

Jup, you can change the positioning with additional CSS, as with all other things. Also see #2513 for a similar request.

[SPyofgame]

Seems like it didnt work

It still not override the style for the button :<

[kamilkrzyskow]

@SPyofgame2
I don't use this feature, but there is some kind of top: 69px inline CSS in that button when I looked at the reference site https://squidfunk.github.io/mkdocs-material/reference/. It's not in the plain/raw HTML, so it's added later by some JavaScript or something, but I didn't find anything specific looking over the source files.

If that is the case on your site too then you need to use the !important flag to increase the importance of your additional settings in the CSS file over the inline settings. Keep in mind that this flag is designed for such cases like this, and shouldn't be overused in the manner of "just in case I'll put it everywhere".

[SPyofgame]

Thank you, it is working. I once thought it might cause some issues hence didn't even bother trying to use it. Now I get it 👍

[squidfunk]

Jup, in this case !important is necessary. The reason is that while the position is set via CSS, there might be cases where authors implicitly change the size of the header, e.g. by using a bigger logo or adding additional stuff, that would now overlay the back-to-top button. The back-to-top button offset is therefore dynamically computed when JavaScript is available.

Computation is here:

mkdocs-material/src/assets/javascripts/components/top/index.ts

Lines 160 to 168 in 70d1002

	/* Watch header height */
	header$
	.pipe(
	takeUntil(done$),
	distinctUntilKeyChanged("height")
	)
	.subscribe(({ height }) => {
	el.style.top = `${height + 16}px`
	})

[SPyofgame]

Thanks