Header

Modern and simple header

Normal header


<header class="header">
  <div class="header-contents">
    <div class="header-title">
      <h1 class="size-3 header-item">Molecule</h1>
    </div>
    <nav class="nav">
      <a class="header-item bg-header-item text-text size-4">Document</a>
      <a class="header-item bg-header-item text-text size-4">About</a>
    </nav>
  </div>
</header>

Fixed


<body class="header-fixed">

<header class="header fixed">
  <div class="header-contents">
    <div class="header-title"></div>
    <nav class="nav"></nav>
  </div>
</header>

Only if not mobile


<body class="header-fixed not-mobile">

<header class="header fixed not-mobile">
  <div class="header-contents">
    <div class="header-title"></div>
    <nav class="nav"></nav>
  </div>
</header>