CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 53

How to Link To Just Above A Header Within the HTML Page

I have created a one page website where each link in the nav bar scrolls to a different section of that page. The issue is that my nav bar is sticky and when I link the list items to my specific headers, the page scrolls so that the nav bar ends up covering the section header.

Is there a way that I can link my nav bar items to an area just above the headers so that when it scrolls it is not covered by the nav bar. I was thinking possibly having it scroll to a specific y value? Not sure how that would work.

Upvotes: 1

Views: 52

Answers (1)

Psychedelic Wizard
Psychedelic Wizard

Reputation: 123

You can adjust the layout using css. If this were your code:

<a href="#goto">Jump</a>
<!-- yadda yadda yadda -->
<h2 id="goto">Header</h2>

You can adjust the h2 id with the following (using margin-top and height):

h2::before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
  pointer-events: none;
}

More detailed info can be found at: https://css-tricks.com/hash-tag-links-padding/

Upvotes: 2

Related Questions