Donny195

7 hours ago, dsonesuk said:

:target{ margin-top: 2em;}

Thank you! It didn't pass through my mind to use the :target attribute. it surely is a nice compromise having the margin only when clicked the bookmark, even if I hoped in something more "invisible".

Just a correction for anybody else that should need this implemented: margin-top sets a margin "outside the element", so the bookmark would still be aligned with the top of the page (under the w3-top). padding-top is the right thing as it sets a padding "inside the element"

I believe it's a pretty common observation that the w3-top class of w3.css works by hiding the page below.

It seems to me that  the default solution is to add some <br> , or setting a margin on the top of the page. That's good enough for layout, but that doesn't help if you use bookmarks with id: when you follow a link from an element with <a href="#example">, this will show the <div id="example"> on the very top of the page, where it will be covered by the w3-top class.

I know it's a bit silly and not a huge problem but I'd like the user to get to read the bookmark without scrolling the w3-top class out of the way.

Does anybody have any idea on how to solve it? Is there a way to set the bookmark a little higher (to a set height for every instance) on the page?

Am using this to write an article with a list of references at the bottom.

I have the same issue. I believe the default solution is to add some <br>  or setting a margin on the top of the page and that's good enough for layout but that doesn't help if you use bookmarks with id: when you follow a link to an element with <a href="#example">, this will show the <div id="example"> on the very top of the page, where it will be covered by the w3-top class.

I know it's a bit silly and not a huge problem but I'd like the user to get to read the bookmark without scrolling the w3-top class out of the way.

Does anybody have any idea on how to solve it?