Bootstrap anchor offset issue

Question

I'm using Bootstrap with the Slate theme here: http://bootswatch.com/slate/

When jumping to different anchors on the same page, it's offset and doesn't go to the exact content section it should (or not display right).

For example: http://bootswatch.com/slate/#nav

This is intended to jump to the "Navs" section and it almost does, but it's slightly offset down and you cannot see the title.

I'm experiencing the same issue on my own site with this theme, how can I fix this anchor issue?

I'm doing the basic:

<a href="#nav">Jump to Nav</a>

...

<a id="nav">Navs</a>

It's jumping to right position, the top fixed menu is covering the title so you can't see it. You must put your anchors some place above the title so that menu won't be covering them. — Wilq, Nov 26 '13 at 19:22
@Wilq I've tried that in my own work, I had a div I wanted to jump to so I created a new anchor above it in the HTML and it didn't help at all. Any tips in specific? — JBurace, Nov 26 '13 at 19:26
try adding `id="nav"` at your `class="row"` div where Navs header is placed and removing it from `h1` element — Wilq, Nov 26 '13 at 19:31

score 4 · Accepted Answer · edited May 23 '17 at 12:22

4

Try wrapping an <a> around the element you want to skip to, like this answer suggests - e.g.

<a href="#nav">Jump to nav</a>

<a id="nav">
    <h1 style="padding-top: 50px; margin-top: -50px;">Test</h1>
    <!-- Offsets the fixed navbar -- just an example, this should be in CSS -->
</a>

edited May 23 '17 at 12:22

Community

1
1

answered Nov 26 '13 at 19:31

user3142418

372
1
7

No luck, I tried `
` and Firefox is still having same issue.
– JBurace Nov 26 '13 at 20:26
Code: https://gist.github.com/rtnielson/7665757 Can paste into http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion and then see the difference between Chrome & Firefox when trying to jump to "My Anchor" – JBurace Nov 26 '13 at 20:37
@JBurace: It seems to work in FF if you apply the inline styles to the `` instead - it works in Chrome as well but you'll also need `display: inline-block;` – user3142418 Nov 26 '13 at 21:14

score 3 · Answer 2 · answered Nov 26 '13 at 19:31

3

Put you anchor above the bootstrap "row" class. Something like this, it worked for me.

    <a id="nav"></a>
    <div class="row">
      <div class="col-lg-12">
        <div class="page-header">
          <h1>Navs</h1>
        </div>
      </div>
    </div>

answered Nov 26 '13 at 19:31

wesley

553
1
4
9

I have a `
Header
content` code I want to anchor to. I added the `` right before that, but it didn't help at all. – JBurace Nov 26 '13 at 20:24
NOTHING else would work for me... but this did. Thanks @wesley ! wesley's answer depends on having a "row" element... like I do. I had the problem where I couldn't move to an anchor point **at all** because of how all the divs and rows were setup. This solved it. – mystic cola May 27 '16 at 14:26

score 1 · Answer 3 · edited May 23 '17 at 11:52

I couldn't get the other answers to work; may have been my error. But I liked the solution offered by Jan to the question offsetting an html anchor to adjust for fixed header; I just had to tweak it because bootstrap buried my anchors in paragraphs.

So I made the style as follows:

  p a.anchor {
    display: block; 
    position: relative;
    top: -50px; 
    visibility: hidden;
  }

and made all my anchors class="anchor". This is clean and just one parameter to update.

Bootstrap anchor offset issue

3 Answers3

` and Firefox is still having same issue.

Header