Internal Page Links and Sticky Header

@dccharron

This is what you want. Check the last section labeled “Fancier (Clean HTML) Method”. Had the same problem and worked fine for me.

Details:

HTML (instead of <h2>-tag or additionally you also can assign a css-class)

<a href="#goto">Jump</a>

<!-- yadda yadda yadda -->

<h2 id="goto">Header</h2>

CSS (adjust your css-class and pixel values accordingly)

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

Good luck!

• This reply was modified 7 years, 8 months ago by stucyber. Reason: added details for archival reasons

Woo hoo! Well done! Many thanks. First time I use a pseudo.

Variation: I used a new “class” (called it “below-header”). Provides me with better control as in:

.below-header:before { 
  display: block; 
  content: " "; 
  margin-top: -100px; 
  height: 100px; 
  visibility: hidden; 
}

then

<h4 id="Part1" class="below-header">Introduction</h4>
.
.
.
<a href="#Part1">Back to Introduction</a>

Works like a charm. Thanks again.

• This reply was modified 7 years, 8 months ago by dccharron.

Glad to help. Maybe mark this as solved?

I spoke too soon. It doesn’t work if I use it like this:

Part 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit dolor sed erat maximus, id dictum odio ullamcorper. Pellentesque vel velit ullamcorper, egestas sapien in, sagittis libero. Aenean dapibus sapien vitae nisi efficitur lobortis.

Link back to start of Part 1

Part 2
Donec condimentum est varius, mattis ipsum vel, ullamcorper nisi. Etiam vitae faucibus eros, ut vehicula mauris. Praesent cursus nunc nec velit maximus, vel rhoncus nibh vestibulum.

Link back to start of Part 2

Part 3
Mauris placerat consectetur faucibus. Nulla augue mi, luctus vitae felis efficitur, ultrices dapibus ligula. Fusce nulla nisl, vehicula non tellus a, tristique convallis libero. Aliquam fermentum finibus tortor vitae pulvinar. Nullam placerat neque justo, sit amet iaculis velit rutrum id.

Link back to start of Part 3

When I apply the solution to this scenario, only the last link works (Link back to start of Part 3). The other two links appear on the page but when I hover my mouse over them, nothing happens (pointer doesn’t change and I can’t click on them). I can see what’s happening is that the negative margin and compensating height cause the heading element to take up physical position ON TOP of the href. When that happens, the href doesn’t work. On the very last link (back to Part 3), because there is no big invisible overlay, the href is visible and works.

I’ve experimented with various things but nothing seems to solve the problem.

I had a look at your source code. You write you’re using
<h4 id="Part1" class="below-header">Introduction</h4>,
but actually your html still uses the deprecated

<a name="Part1"></a>
<h4 style="margin-top: 0px; line-height: inherit; font-style: italic;">1 Introduction</h4>

.
Did you update your code? Are we still seeing a cached version, that means do you use a cache plugin or a minifier and did not empty the cache?

Compare your code to my html at https://www.s-c-b.org/contact/privacy-policy/ and css below:

h2.pp-anchor:before,
p.pp-anchor:before {
    display: block;
    content: " ";
    margin-top: -120px;
    height: 120px;
    visibility: hidden;
}

• This reply was modified 7 years, 8 months ago by stucyber. Reason: link and css added

Sorry. I ran out of time to get this working. The simple solution was to turn off the sticky header on the theme. It’s not my favourite solution but at least I know it is working. I have a meeting with the client tomorrow morning.

I appreciate your second look at my problem. At the moment I’m not able to set up a separate test case since it would have to be done on a separate website (where I can turn on the sticky header).