WordPress.org

Ready to get started?Download WordPress

Forums

Frontier
[resolved] Internal anchor lands below linked-to header--how to fix this? (14 posts)

  1. licoricetwist
    Member
    Posted 6 months ago #

    Hi, and thanks for a great theme which has proven very flexible for my needs. Nearly finished! This is the site, if you need it.

    I'm linking to headings in an FAQ from links at the top of the page, and from a text widget on the side. Somehow, when I click a link goes to just below the heading, so the heading can't be seen.

    So far I've tried \a name="item"\, \a id="item"\, I've included a non-breaking space in the anchor, which gives me an underlined space (and when I removed the underline with some css, the editor removed the space). A line break gets removed by the editor. A non-breaking space outside the brackets works a treat until the editor takes it out again. :-(

    The only method that seems to work at the moment is to have the underline space inside the named anchor, or to put the anchor in the previous item, neither of which is really satisfactory.

    What am I missing? I'm not a programmer, so it could be anything! Thanks for any help!

  2. Andrew
    Forum Moderator
    Posted 6 months ago #

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

    <h3 id="join"> ... </h3>
  3. licoricetwist
    Member
    Posted 6 months ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    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.

  5. licoricetwist
    Member
    Posted 6 months ago #

    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.

  6. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

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

  7. ronangelo
    Member
    Theme Author

    Posted 6 months ago #

    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.

  8. licoricetwist
    Member
    Posted 6 months ago #

    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.

  9. licoricetwist
    Member
    Posted 6 months ago #

    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?

  10. ronangelo
    Member
    Theme Author

    Posted 6 months ago #

    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;}
  11. licoricetwist
    Member
    Posted 6 months ago #

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

  12. ronangelo
    Member
    Theme Author

    Posted 6 months ago #

    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;}

  13. licoricetwist
    Member
    Posted 6 months ago #

    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?

  14. licoricetwist
    Member
    Posted 6 months ago #

    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!

Reply

You must log in to post.

About this Theme

About this Topic