search

OpenDevelopmentMekong / wp-odm_theme

Wordpress child theme for ODM, based on jeo
https://opendevelopmentmekong.net
5 stars 4 forks source link

Avoid Sticky Navbar cover Anchor content #1356

Open S-mardii opened 2 months ago

S-mardii commented 2 months ago

With the Sticky Navbar enabled, the top section of the page is covered by the sticky navbar when the Anchor linked is clicked. It is a confusing behavior for the users as that covering up section is the header or the content that we are trying to anchor.

The issue is happening mainly for "On this page" and "Footnote".

S-mardii commented 2 months ago

A possible and effective solution is to use CSS scroll-padding-top: 3rem; on the html selector.

Source: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html