Question

I have an html page that i must not modify, and everything i do it must be done with CSS.

I hava 4 “section” tags in the html page, and on the top of that page there is a navigation bar. Each element of the bar is an internal link (page jump) to a specific section of the same page.

Normally, when i click on one of these links, the first row of the suitable section will appear on top of my page.

But i have modified the position of the navigation bar, so it will always stay on top (position:fixed).

So when i click on 1 section button, the first row (and 1 or 2 more rows) of the chosen section, are covered by my navigation bar … 🙁

What i want is a solution, so when i click one option on my navigation bar, then the first rows of the selected section will not appear on the top of the screen, but just under my bar.

If some code is necessary, please ask specific parts, because it is long enough.

Answer 1

Have you tried applying a positive padding-top to the sections, and then canceling out that padding with a negative margin-top? The value of both would be the desired gap between the section and the top edge of the screen after clicking the jump length.