HTML static bar on top covers the link to the section

Question

I have a static horizontal bar on the top of the website, this height of the bar is 100px. In the body of the html I have something like:

<a name="photo-section"></a>

So I can recall that section from my website www.domain.com/#photo-section The problem is that the bar covers part (100px) of the photo section because it is static; is there some solution to this? I added a white div on the top but it looks very bad on the actual website.

You can see the problem when you click on the nav link "photo" in here

Thanks

Answer 1

Solution 1: You can try this by adding a little CSS:

<a href="#photo-section">Jump to Photo Section</a>

[....]
<a name="photo-section" style="display: block; padding-top: 100px;">Photo Section</a>

Solution 2: Or using jQuery or whatever javascript-like:

<a name="photo-section" id="photo-section">Photo Section</a>

and then trigger the animations by

<script>
function scrollBonus(id) {
    $('html, body').animate({scrollTop: ($(id).scrollTop() + 100) + 'px'}, 300);
}
</script>

And if you want to trigger it even if the visitors click your link from another page:

<script>
     $(document).ready(function() {
          scrollBonus(window.location.hash);
     });
</script>

Hope this helps.