Search code examples
cssscrollnavbar

Prevent content to scroll beneath a fixed navbar


This page http://alsotoday.com/roemerstrasse/ has a fixed bootstrap navbar, which should stay fixed, so the video in the background can shine through it. When scrolling the content all the way up, it will go beneath the navbar, which is not favourable. Anybody know, how to create an upper margin for the content, so it will scroll only just beneath the navbar without changing the navbar to not-fixed?

Edit 1: main-area-video and panel_container (meanwhile called main-area) are both height 100%, because each, the video and the tiles should fill a screen.


Solution

  • Since your page is always at 100% height and the only thing getting scrolled is the content you could just make it absolute instead of fixed.

    But since you asked for a solution with a fixed position just add an margin to the content wrapper.

    So to be clear: add margin-top: {MENU_HEIGHT}px to the content div, replacing {MENU_HEIGHT} with the actual height of your menu or the desired distance from it.