fixed header blocking anchor links-CodePudding

i have a fixed navigation menu header that is “sticky” as you scroll, chances are you’ve run into this issue. When you click on a link to an anchor further down the page, it scrolls so the anchor is now at the very top of your window…behind the nav header that, of course, has remained at the top of the screen.

i tried to use anchor class but was not able to get it to work

 
 ::selection {
  background: #51565D;
}
.content {
  padding: 16px;
}
 
 html {
scroll-behavior: smooth;
}
 
.anchor {
display: block;
margin-top: 7%;
visibility: hidden;
}
  
#projects, #products, #contact, #volunteer {
 font-family: "Lucida Console", "Courier New", monospace;
 font-weight: bold;
 text-align: center;
 }

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky   .content {
  padding-top: 60px;
}

.img {
  margin-top: 8px;
}
.container{
  display: flex;
  list-style-type: none;
  justify-content: center;
  flex-wrap: wrap;
}
</style>

CodePudding user response：

I recommend adding a padding to the top of the anchor element, that is the same size as the height of the sticky element (pushing the contents into view)

For example (and just a guess) maybe you could change

margin-top: 7%; to padding-top: 7%

CodePudding user response：

Found it:

.anchor:target {
  padding-top: 60px;
  scroll-margin-top: 60px;
}

#projects,
#products,
#contact,
#volunteer {
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bold;
  text-align: center;
  scroll-margin-top: 60px;
}