I created a menu structured like this:
<div id="menu">
<a href="#p1">Paragraph 1</a>
<a href="#p2">Paragraph 2</a>
...
</div>
and set it to have a fixed position:
#menu {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
}
In addition, there is a content div included:
<div id="content">
<p id="p1">...
<p id="p2">...
...
</div>
This content has its specific styling applied:
#content {
position: relative;
top: 30px;
}
While everything seems to work smoothly as I scroll through the page, I encountered an issue when using the section links in the menu such as href="#p8", where the menu ends up covering part of the targeted paragraph.
How can I resolve this overlapping issue?
edit
Here is a jsfiddle example for reference: http://jsfiddle.net/hcvuw4s9/
*Feel free to try out paragraph 3