Navbar obscures anchor target on Desktop

[VincentTam]

To reproduce this (diff output attached below):

1. In a sufficiently long file under exampleSite/content (say, Photoswipe Gallery Sample), mark some words in first paragraph with <span id="test">Beautiful Hugo</span>.
2. At the bottom, create an anchor <a href="#test">Note</a>.
3. Local preview with cd exampleSite; hugo server --themesDir=../..
4. Observe the error.

After I clicked on the anchor below, which points to the start of the first paragraph, the anchor sends me to the anchor target, which is covered by the navbar on the top. This happens on Desktop browsers. I've tested this with Google Chrome on mobile, and I didn't observe this on my phone.

diff --git a/exampleSite/content/post/2017-03-20-photoswipe-gallery-sample.md b/exampleSite/content/post/2017-03-20-photoswipe-gallery-sample.md
index 3daf172..3dc99a5 100644
--- a/exampleSite/content/post/2017-03-20-photoswipe-gallery-sample.md
+++ b/exampleSite/content/post/2017-03-20-photoswipe-gallery-sample.md
@@ -5,7 +5,7 @@ date: 2017-03-20
 tags: ["example", "photoswipe"]
 ---

-Beautiful Hugo adds a few custom shortcodes created by [Li-Wen Yip](https://www.liwen.id.au/heg/) and [Gert-Jan van den Berg](https://github.com/GjjvdBurg/HugoPhotoSwipe) for making galleries with [PhotoSwipe](http://photoswipe.com) . 
+<span id="test">Beautiful Hugo</span> adds a few custom shortcodes created by [Li-Wen Yip](https://www.liwen.id.au/heg/) and [Gert-Jan van den Berg](https://github.com/GjjvdBurg/HugoPhotoSwipe) for making galleries with [PhotoSwipe](http://photoswipe.com) . 

 {{< gallery caption-effect="fade" >}}
   {{< figure thumb="-thumb" link="/img/hexagon.jpg" >}}
@@ -34,4 +34,4 @@ For full details please see the [hugo-easy-gallery GitHub](https://github.com/li
 - All the [features/parameters](https://gohugo.io/extras/shortcodes) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt
 - `{{</* gallery caption-effect="fade" */>}}` will fade in captions for all figures in this gallery instead of the default slide-up behavior
 - Many gallery styles for captions and hover effects exist; view the [hugo-easy-gallery GitHub](https://github.com/liwenyip/hugo-easy-gallery/) for all options
-- Note that this theme will load the photoswipe gallery theme and scripts by default, no need to load photoswipe on your individual pages
\ No newline at end of file
+- <a href="#test">Note</a> that this theme will load the photoswipe gallery theme and scripts by default, no need to load photoswipe on your individual pages

[ayaco-zg]

I got the same problem ... the element specified in the URL hash was hidden by the navigation bar. The problem can be solved by writing the following in a script file such as main.js.

document.addEventListener('DOMContentLoaded', function(){

    $(window).on("load hashchange", function(e){
        if(("" == window.location.hash) || (0 == $(".navbar").length)) return;
        const navbarH = $(".navbar").height();
        const adjustT = $(window.location.hash.replace(":", "\\:"))[0].getBoundingClientRect().top - navbarH;
        if(0 > adjustT) $("html,body").animate({scrollTop:("-=" + Math.abs(adjustT))}, 300);
    });

});

And also, there is another way to solve it with css. Take a look below.

https://ayaco.gitlab.io/zerogravity/post/2021-11-14-start-blog-for-free8/