Search code examples
jqueryhtmlcssmenusticky

Sticky header overlap content

I found answers for this question but it doesn't help my situation. This is my site, when I jump to content, the header overlapped by sticky header.

This is my idea to fix it:

  1. I will get #team from the link (e.g: https://kieferorthopädie-dietze.de/praxis/#team/)

  2. Then will compare the #team with container, if the container has the same id with link, I will add padding-top to the body.

  3. If user scroll up, body will remove padding-top.

Hope anyone can give tell me how to code to fix this issue. Thanks in advance!

Solution

  • You can do this in pure CSS - I do it myself on www.cntrl.no/license (click on one of the links in the index)

    h4::before {
    content: " ";
    display: block;
    height: 7em;
    margin-top: -7em;
    visibility: hidden;
}

    Granted, that is for the h4 I use - you can of course substitute that for whatever container or element you use to jump to. And the height is for my header-bar height - you will probably have to adjust it slightly.