Web - How to style a page to allow a fixed top header (Navbar / Menu) ?

About

If you create a region at the top of your page that is positioned fixed, it will overlay your other content:

• when the page is loading: the top text of the page will be cached
• when navigating with url fragment

You need to style your page further to correct this behavior.

Solutions

Padding on the body

To translate the text below the fixed header towards the bottom, you need to add a padding to the body

Example:

body { padding-top: 70px; }

You can also calculate dynamically the header height and update it with Javascript.

window.requestAnimationFrame(function() {
    let fixedNavbar = document.querySelector(".navbar[data-type=\"fixed-top\"]")
    fixedNavbar.classList.add("fixed-top");
    let offsetHeight = fixedNavbar.offsetHeight;
    document.body.style.setProperty("padding-top",offsetHeight+"px");
});

body { padding-bottom: 70px; }

Navigation to a fragment target

When navigating / scrolling to the target element of a fragment, the default behavior is to set the target position at the top of he page. The target element are then cached by the fixed header.

To correct this behavior, you can apply the scroll-margin-top property

:target {
  scroll-margin-top: 80px;
  scroll-snap-margin-top: 80px
}

An old method was to create an invisible box with a negative margin but add the disadvantage to create a larger box space.

:target::before {
  content: "";
  display: block;
  margin-top: -80px;
  height: 80px;
  width: 1px;
}