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


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.


Padding on the body

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


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\"]")
    let offsetHeight = fixedNavbar.offsetHeight;

For a fixed bottom navbar, you should also correct it but with a padding-bottom

body { padding-bottom: 70px; }

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;

Powered by ComboStrap