Commit for reference: 0c2228f13ffce32665eb036f32e9d81c2de86e97
Solution:
Adding a padding-top == height of the nav bar + 10px, and set margin-top to negative of that same value.
The question is -- how should we find all elements that need to be adjusted?
lame solution: author adds a CSS class to each tag. (Redundant and extra work on author's part is bad.)
Iterate over all a.hrefs and find ones which start with "#"?
expensive if there are many tags -- though this could be background task. (Are there browser async loops? Hmm.)
do something for all id elements on a page?
This is visually not going to tweak the page, though hopefully this won't cause a CSS reflow?
figure out a solution using <a name=""></a> and just modifying a[name] CSS rules?
technically when authoring this seems to be more work, but makes the purpose of the use explicit (whereas ids have multiple uses.)
super easy to modify in JS, but we need to be clever with how a[name] actually causes pages to behave if the element isn't showing? (Add empty content?)
Until fixed, this page demonstrates the issue: http://bjc-edc.github.io/bjc-r/cur/programming/1-introduction/TG/overview.html (Click on a link at the top of the page.)
Issue appears regradless of screen size.
Commit for reference: 0c2228f13ffce32665eb036f32e9d81c2de86e97
Solution: Adding a padding-top == height of the nav bar + 10px, and set margin-top to negative of that same value.
The question is -- how should we find all elements that need to be adjusted?
a.hrefs and find ones which start with "#"?asyncloops? Hmm.)idelements on a page?<a name=""></a>and just modifyinga[name]CSS rules?ids have multiple uses.)a[name]actually causes pages to behave if the element isn't showing? (Add empty content?)