HTML相对链接链接到导航栏覆盖的锚点

Question

When I create a relative link in HTML, <a href="workshops.html#bot" class="btn btn-primary">Bot Workshops</a> it links properly, but places the anchor at the top of the page, covered by a navigation bar. Is there a way to make it be lower so that the anchor is underneath the navbar?

Answer 1

If I understand it correctly, when the user clicked <a href="workshops.html#bot" class="btn btn-primary">Bot Workshops</a> , it should go underneath the navbar.

In your navbar, add an id. For example:

<div id="bot"></div>

Answer 2

Maybe you need to change the display of the anchor link.

a {
    display: block;
    ...
}

Answer 3

You should add a padding-top to the #bot div (approx the height of the navbar plus some space). (This is based on some assumptions below)

I think your navbar is fixed?

If that is the case, the top of the #bot anchor div will be on the top-edge of the browser viewport. But the navbar will be obfuscating some of that content underneath.

This is more of a css/styling issue.

If you do add a padding-top, you might also want to make sure that value is responsive.