'fixed header blocking anchor links

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>
htmlcss


Solution 1:[1]

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%

Solution 2:[2]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kyle
Solution 2 isherwood

Related Questions