Jump to content
Donny195

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

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.

Share this post


Link to post
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"

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...