Jump to content

How to fix w3-top class for not hiding content behind while using bookmarks?


Donny195

Recommended Posts

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.

Link to comment
Share on other sites

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"

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...