Not sure what you meant but if you mean you want the content that you just linked to to stop before it is obscured by the top links then you could use this method.
a[name] {
position:absolute;
z-index:-1;
left:0;
margin-top:-100px;
}
You should probably class that element if you have other a name elements around (Note that in html5 name attributes are deprecated. Just use ids on existing elements instead. except in the trick above you will need separate elements <div id="highlight-a"></div>).
You will also need to use media queries to decide when to wrap those links to a new line and then at the same time increase the negative margin to compensate for the increased height. (Probably better to use ems for the negative margin anyway to compensate for text resize).
It may also be an idea to make the text under the links slightly opaque as they look annoying.
e.g.
.alpha-nav{
background:rgba(255,255,255,0.8);
}
(although you will probably need to apply that code to a full width wrapper instead as your nav doesn’t go to the boundaries.)
For firefox and Chrome you could add the scroll-behaviour propertyso that the page
scrolls smoothly to the link because otherwise it just jumps and frightens most users 
html{ scroll-behavior: smooth;}
This old codepen shows the basic concept.