Very basic site header

So basic, it doesn’t even have links in the navigation! This version uses traditional HTML element and classes.

by David Storey

HTML

<div class="header"> 
  <h1>A wonderful web site</h1> 

  <ul class="navigation"> 
    <li>Some page</li> 
    <li>Another page</li> 
  </ul> 
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

html {
  font: 62.5% "segoe ui", helvetica, arial, sans-serif;
  background-color: #fff;
}

body {
  font-size: 1.6rem;
}

.header {
  background-color: #0078d7;
  color: #fff;
  padding: 2rem;
}

.navigation {
  margin-top: 2rem;
}

.navigation li {
  display: inline-block;
  margin-right: 1rem;
}