Custom section menu link

Hi,
I am building as a one page format and using custom links as the menu to be able to navigate/jump to each section/row within the page.

Currently the menu link takes me to the section/row but cuts off the top part of each row where I have a text block. I can see part of the next but need to be able to adjust where the link jumps to.

It appears that it does not take into account the height of the header bar. That is about the amount of area that is being cut off.

I could probably add extra space into the top of each row to drop everything down but would not be the best solution for overall design/appearance.

Can this “jump to” of point be adjusted with css?

Also, is it possible to create a scroll effect rather than jumping to the section?

Regards,
Cmel