HTML CSS

STICKY HEADERS IN HTML CSS

(real quick examples)

<header id="page-head">   HEADER </header>

FIXED HEADER HTML

01

<main id="page-main">   CONTENTS </main>

#page-head {   FIX HEADER TO TOP   position: fixed; top: 0; z-index: 9;   DIMENSIONS   width: 100%;  height: 30px;  }

FIXED HEADER CSS

02

MAKE SURE CONTENTS NOT COVERED UNDER HEADER #page-main {  margin-top: 30px; }

<header id="page-head">   HEADER </header>

STICKY HEADER HTML

03

<nav id="page-nav">     <a href="#">NAV</a>     <a href="#">NAV</a>   <a href="#">NAV</a> </nav>

<main id="page-main">   CONTENTS </main>

STICKY HEADER ON TOP #page-nav {   position: sticky;   top: 0;   z-index: 9; }

STICKY HEADER CSS

04