CODEWITHSUNDEEP
htmlcssanchoroffset
DarrenUK
DarrenUK

Reputation: 61

How to offset a anchor link to clear fixed header?

As the title describes. I am trying to offset the anchor link, so it appears 100px from the top of the viewport.

This is what I have tried so far.

<style>
   :target {
      display: block;
      position: relative;
      top: 100px; 
      visibility: hidden;
      }
 </style>

<a href="#01"> Go to link 01</a> 
  
<h2 id="01"> link 01</h2>

edit:: I think I miss read the online tutorial I was following. I have also tried this, but still can't get it to work.

<style>
   :target {
      display: block;
      position: relative;
      top: 100px; 
      margin: -100px 0;
      }
 </style>

<a href="#01"> Go to link 01</a> 

<h2 id="01"> link 01</h2>

Upvotes: 1

Views: 6410

Answers (3)

LBF
LBF

Reputation: 1205

I'd do it this way:

:target { scroll-margin-top: 100px; }

The current accepted answer caused z-index issues for me -- the pseduo element overlapped the links above it and made them unclickable. Adding z-index:-1 didn't solve it in my case. So I gave this a try and it worked perfectly.

Upvotes: 0

DarrenUK
DarrenUK

Reputation: 61

This seems to work.

:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}

Upvotes: 4

Karthik
Karthik

Reputation: 111

The CSS applies on the h2 after you click on the anchor. That is how :target css works. Your code will hide the element once you click on the anchor. If that is not required then remove it.

Now your problem of making H2 appear below the header. For this you need to either add position absolute or fixed (depends upon your final HTML), instead of relative.

This is the updated code

<style>

   :target{
      display: block;
      position: absolute;
      top: 100px; 
      }
 </style>

Upvotes: 0

Related Questions