Internal Links to content don't line up properly

HTML-CSS
1

My internal links are not displaying the header and content like they should. The header and part of the content is hiding behind the nav bar. I have read other responses on this but none of the solutions are working for me. Can I get some input please? https://codepen.io/KellyR7/pen/zYZbBwy

2

I checked your pen and I don’t see any content hiding behind the nav bar. Does this issue persist for you?

3

Hi @KellyR !

One way to fix the issue would be to wrap each section in a div and then place the id in your opening div tag.

For example,

  <div id="about-us" class="container">
    <h2>About Us</h2>
    <p class="about">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "</p>
  </div>

Hope that helps!

4

I will try that. Thanks so much!

5

Sorry. I should have specified that the problem occurs when I click the internal links.

6

You can use scroll-padding as well.

html {
  scroll-padding-top: 100px;
}
7

Awesome! That did the job adding very little code. Thank you!!

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.