Creating Page Links Inside My HTML

HTML-CSS
1

Hey! I was trying to create a page link inside my page to another section.

Whenever I set my anchor tag and id, whenever I click on it, it always jumps below the element. For example:

<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>

...
<h2 id="home"> Lorem Ipsum </h2>
....
<p id="about" > Ipsum Loreum </p>

Suppose this is my code. Whenever I click on the Home link it brings me underneath the <h2> tag. I want it to directly show me the <h2>element. Thanks, Campers!

2

Hi Shaux :slight_smile:

I copy-pasted your code and filled it with Lorem Ipsum and it already works pretty well as you can see following this link https://codepen.io/Meditsh/pen/dybpxZz?editors=1000

Did you make sure you wrote your lorem ipsum UNDER your links and not above ? That would be an explanation of your problem ^^

3

@Meditsh Thank you so much! But I forgot to mention that I included a fixed navigation bar and the top of the webpage. How do I make sure to ignore that space.

Basically, what’s happening is that whenever I click the link the content I want to see is hidden behind the navbar.

How should I fix this?

4

I went through exactly the same problem while starting to learn CSS :slight_smile:

Sadly even though I found a bunch of solutions on web-forums, each one was way too much complicated than it worthed. Basically it always worked by modifying anchor place or using invisible element.

Finally I decided it doesn’t worth and chose to use a different structure. I suggest you to do so :joy:

If you insist on resolving this mystery I totally respect that :muscle:, make sure to share the solution :wink:

Have fun trainee-developer-mate

5

No problem and thanks for helping!

Nice to know that you saved me from digging myself into a deeper hole and ending up more confused.

I will try to find another work around and perhaps through some manual edits, I can get it working! :slight_smile:

If you are interested, I will post my final solution on my codepen. I would greatly appreciate if you provide some insight in my previous projects. I will be making another post sharing my findings and product landing page soon! :smile: :joy:

6

I am going to send you a private message :wink:

7

Hi,
Am I understand well your problem?
You have a fixed navbar on top? And this fixed bar accidentally cover some content?
To resolve this issue use on your container the following style:

#myContainer {
 margin-top: 70px; 
}

(or check your navbar height and use the exact height)

8

Here are some different techniques for the jump links.

You can also use position: sticky and top: 0; instead of position: fixed as that will not take the element out of normal document flow.

9

Actually the problem is about the jump allowed by the tag :

<a href="#myTargetId"> Target Name </a>

it won’t be impact by “margin-top”,
still it was a good idea :slight_smile:

10

Using position sticky will change the behaviour of his navbar, and won’t solve the problem. Except if I didn’t understand and you don’t apply it on the navbar ?

As for the link you provided I didn’t have the will to try it (as I said earlier too much work for this wasn’t worth for me) but it looks good. If someone hardly want a fixed navbar it deserves a try :slight_smile:

Thank you for the research

11

Once again, thanks for everything! Sorry for the late response, was busy for the whole day. Just wanted to drop on the forum to check up before bed. Anyways, good luck on your future endeavors! :smile: