using an anchor tag to link to an id , but with an offset-CodePudding

When using the anchor tag to go a specific id on my page, i encountered a problem, when i click the link the text is hidden behind my Navbar. I cant just add more padding or margin as it would destroy my design. is there a way to implement some form of offset?

<a href="#text"></a>

<h1 id="text">Text</h1>

CodePudding user response：

Just take the time and find the solution yourself. There are countless options from CSS to JS, but here are some that you can give a try.

Easiest solution:

#text {
   padding-top: 50px; /*height of your navbar*/
   margin-top: -50px;
}

Another solution, taken from here, @LGT:

html {
  height: calc(100vh - 84px); /* Fix the height. The 84px here is the height of your nav. */
  margin-top: 84px;
  overflow: hidden; /* Don't scroll. */
}

body {
  height: 100%; /* Set the height to that of html. */
  overflow-y: auto; /* Draw a vertical scrollbar when needed. */
}

Another solution:

#text:target {
    padding-top: 50px; /*height of your navbar*/
} 
/*:taget pseudo class is used when user accesses the selected tag using href*/