0

I'm trying to create an affixed header using Bootstrap's Affix. I've got my nav bar to affix properly, but I then run into an issue when I user anchor links; the nav bar overlaps the anchor link text when it first loads up. I've found a solution to that here, and in particular I'm using this comment (because I want the anchor text to be visible).

However, that solution makes the link be placed on top of the html before the anchor link, meaning that if I click anywhere there I end up inadvertently clicking on the link. I tried adding a z-index: -10000;, but that didn't seem to have any effect.

How else can I either hide the anchor link behind other HTML, or get the affixed navbar to not appear over my anchor link text?

Here is the simplified version of what I currently have:

HTML:

<div class="nav" data-spy="affix" data-offset-top="1" data-offset-bottom="200">
    ....
</div>
...
<a class="anchor" name="link" href="#link">link text</a>

CSS:

a.anchor:before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 1em;
    margin-top: -1em;
}
Community
  • 1
  • 1
David says Reinstate Monica
  • 18,041
  • 20
  • 73
  • 118
  • What does your code look like? – aaronburrows Mar 17 '15 at 14:34
  • @aaronburrows Added the relevant bits. – David says Reinstate Monica Mar 17 '15 at 14:43
  • In the place where I use this, I see that I've changed from the `margin` method to one using a transparent border. I don't have any notes about what was wrong with the old method, except that I got the border idea from a post by Nicholas Gallagher: http://nicolasgallagher.com/jump-links-and-viewport-positioning/ Maybe it was a problem in Chrome, as some people mentioned. If this works, I'll add it as an answer. – harpo Mar 17 '15 at 17:02

0 Answers0