When you click on internal links how do you jump to the correct part of the page?

HTML-CSS
1

Hi, I wonder if anyone can help? I’m kind of stuck :slightly_smiling_face:

When I click on an internal link and the browser jumps to the relevant part of the page with a #href i.e.

<a class="nav-link" href="#Design">Contact</a>

It jumps to slightly the wrong part of the page because my header menu bar with positoin fixed is sitting on top of the page.

How do I get around this… can anyone help?

You can see the page I am working on here:

http://www.mutantalien.com/Product%20Landing%20Page/#Features

2

There is a trick you can use with top padding/margin. You set a negative top margin on the element you want to scroll to and also an equivalent positive top margin. For example, you might set the following:

#Design {
    margin-top: -2em;
    padding-top: 2em;
}

If you want to see it in action check out my menu project: http://bbsm.surge.sh.

1 Like
3

Oh, that’s great thanks… I found I can get the desired result if I combine with this method:

https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/