Archived topic
How To Use HTML Anchor And Jumps to the Header Including The Title?
1 reply · Started by Peter Paul on October 15, 2020
Hi Team,
Okay, this is a bit difficult for me to describe.
But I recently posted an article and in the table of the article I used the HTML anchor feature.
So I added a #NAMEOFHEADING as the anchor link.
However, I noticed that when I click the link it jumps after the heading block, making the heading title not visible.
*See the article link on private info.
How can we not make it jump right past the heading title?
So that when a visitor clicks on the link on the table, it jumps down to the section and shows that section including the heading or title of that section.
Thanks!
Hi,
How can we not make it jump right past the heading title?
So that when a visitor clicks on the link on the table, it jumps down to the section and shows that section including the heading or title of that section.
It doesn't jump past the heading title on my end as shown here: https://share.getcloudapp.com/L1uQdDZQ
However, I do see that the heading may be too close to the topside of the viewport when jumping to it.
To address this, consider adding offset to the jumplink targets.
In your case, you can try this css:
/* for desktop and tablets */
@media (min-width:769px){
.entry-content h3:before {
content: "";
display: block;
height: 90px;
margin: -90px 0 0;
}
}
/* for mobile */
@media (max-width:768px){
.entry-content h3:before {
content: "";
display: block;
height: 45px;
margin: -45px 0 0;
}
}
