Question

I’m using the bootstrap affix js plugin and it works great. The problem I’m having is when I change the body to use a custom font (Google: Lato) it throws the anchor positions completely off.

The affix links lead to bad positions on the page and the page no longer lines up with the affix sidebar when scrolling. It’s always off by 100px or so.

ie.

body { font-family: 'Lato', helvetica, arial, sans-serif; color: #221e1e; font-weight: 300; line-height: 150%; }

I’m sure there’s another way to compensate for the new smaller font or line-height, but I haven’t found it.

If I raise the line-height on the entire body to say 300, it works ok, except that the spacing is horrible. So I tried to adjust the line height on only the titles holding the anchors.

h2 .mw-headline { line-height: 330%; }

And it almost works, except it’s still off on the first link and it feels kind of hackish. I’m sure there’s a proper way to handle this, I’m just not sure what that is.

Answer 1

You can probably fix this using Bootstrap’s custom variables if you’re using less or sass.

In your case it’d something like:

@baseFontFamily: 'Lato', helvetica, arial, sans-serif;
@textColor: #221e1e;
@baseLineHeight: 20px;

Find more variables here: http://twitter.github.com/bootstrap/customize.html