Internal anchor lands below linked-to header–how to fix this?

Can you put the ID in your headings that title the FAQ sections?
E.g:

<h3 id="join"> ... </h3>

Nice idea Andrew – and it still works as a link but hides the heading when it lands.

I’m wondering about putting an <hr> above the heading (rather than in the heading style) and linking to there…

No, that didn’t work.

I just tested theme on a test site and it looks like what Andrew suggested works okay so long as you are not logged in – it’s the admin bar at the top that covers up the linked to text.

Magic! Well spotted WPyogi. I guess in that case everything I’ve tried would have worked, if I tested it as logged out.

On the other hand, members of BAPT may well be logged in when they use the FAQ, and so might have the same problem…

The current work-around is to put the anchor just before the full stop in the previous entry. When logged out one lands a little high, but that’s not so much of a problem.

Interestingly, I’ve just logged in as a standard member to test that theory, and the admin bar isn’t there (it usedto be last time I tried) – a new puzzle to figure out! What I’ve been saying in the faqs presumes its presence.

It might work to move the whole page down from the top by putting a margin up there….haven’t tested that.

You could also try adding a <br> between the target anchor and the headings to add a little more space.

Ex.

<div id="heading1">
  <br>
  <h3>Heading 1</h3>
  .
  .
</div>

<div id="heading2">
  <br>
  <h3>Heading 2</h3>
  .
  .
</div>

Note: I see you’ve edited the parent theme’s style.css, you know that changes made there are deleted if you decide to update the theme, right? Just a little reminder. Next time use the custom css option or consider using a child-theme.

I’ve added divs, now my playing around with space won’t change the anchors.

Your idea of a
worked, Ron – provided I preceded it with a non-breaking space. I had tried that before, but not in a div. So I did that, and everything was going well, everything working, when I changed to the visual editor – and then although the divs have stayed, all the breaks and non-breaking spaces vanished!

Is this a WordPress bug, or simply means I’m coding it wrong? I have noticed that an apostrophe in my text often means the following anchor doesn’t work.

WPyogi – the idea of a margin is effectively what adding space above the h3 heading is doing.

Ron – reference your note, I was aware a child theme or custom css was the better way to go, but with the steepness of my learning curve and short timescales I was reluctant to add another variable at the time.

I’ve commented all my changes, and am now thinking of extracting them to one of those, but when I’ve read the instructions I am still intimidated!

Back to the main issue – I wonder if there is a way to build space into the css for the h3 headings that will shift where the link lands and not vanish if I use the Visual editor?

Back to the main issue – I wonder if there is a way to build space into the css for the h3 headings that will shift where the link lands and not vanish if I use the Visual editor?

You could add a class to your headings then use it add additional space to your titles.

Ex.

<h3 id="heading1" class="myheading">Heading 1</h3>
   ...content

<h3 id="heading2" class="myheading">Heading 2</h3>
   ...content

<h3 id="heading3" class="myheading">Heading 3</h3>
   ...content

On the Custom CSS or style.css

.myheading {padding-top: 20px;}

And will that make the link land in that space, rather than at the heading?

It will land on the heading. But the padding is part of the heading so it will have an allowance on top when the links are clicked.

If you don’t want to manually add a class for each h3 then you can just use this css to modify the heading but only on that particular page you’re working on.

.page-id-1300 .entry-content h3 {padding-top: 20px;}

Thanks for that, Ron. I don’t particularly want to add space (the page is long enough already), but so far it is the only way I’ve found to get the heading to not be covered when the link lands there, for a logged-in user.

The puzzle is, how can I get the link to land a line *above* the heading?

Sorted, I think.

I’ve kept Ron’s idea of enclosing each item in a div with the id for the anchor. Then, because a space + line break doesn’t ‘stick’, I’ve added a small graphic (a mini version of the logo) above the line. It effectively pads the space between the top of the div and the h3.

If it’s hidden by the WP admin bar, it’s no loss. If it’s visible, it doesn’t look too peculiar (like an odd line might)

Thanks everyone for your ideas!

hi guy i have problem in finding out Internal links missing anchor could anyone help me please

i figured out the link but when i click on the link directs to the home page please help me i am new to wordpress