You can fix the navigation bar with position:fixed and top:0 (as you already did), and set its height to the given value, and then apply the same value to the padding-top property of each target anchor.
Thus, when you click navigation links, the top anchor elements will move to the top of the browser window, and while they are partially closed by the navigation panel (due to z-index:1 set in navbar), this covered part will be the fill area, which will not have any content and will usually be invisible (unless borders or background colors are added). Thus, the content will launch correctly right after the navigation bar.
Here is a sample code:
CSS
#navbar { position: fixed; top: 0; z-index: 1; height: 1em; margin: 0; } .heading { padding-top: 1em; }
- HTML:
<div id="content"> <h2 id="one" class="heading">Section 1</h2> ... <h2 id="two" class="heading">Section 2</h2> ... <h2 id="three" class="heading">Section 3</h2> ... </div> <div id="navbar"> <a href="#one">Section 1</a> <a href="#two">Section 2</a> <a href="#three">Section 3</a> </div>
Of course, this does not solve the problem of the dynamic height of the navigator, but Bryan's suggestion to use JavaScript for this is probably the easiest (only?) Way to implement this.
ps - Keep in mind that if the id'd element has display:block or display:inline-block , indentation will affect the page layout, which may be undesirable.