No Time Dad

A blog about web development written by a busy dad

CSS Flexbox Header Template

This is my go-to when I need a header that’s quick to make, responsive, and looks nice. It’s a small amount of code to get a basic header template. The most important part is that it’s easy to extend.

The header is a flexbox container that has three child elements: title, nav, and actions. Each child element has placeholder text for this example, but they should be treated as micro layouts.

...
<header>
  <div class="title">Title</div>
  <nav>Nav</nav>
  <div class="actions">Actions</div>
</header>
...
header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  header {
    flex-direction: row;
    justify-content: space-between;
  }
}

It’s not a lot of code. But, it works across most browsers and I think it’s a good template to start with for most sites. Especially if you don’t want to spend a lot of time designing a responsive header.

Admittedly, this responsive header isn’t fancy. It doesn’t do anything with JavaScript to show or hide a the nav menu, it just moves the menu down in the flexbox container column. Very un-fancy.

The template could be modified to do more fancy things (some JavaScript might be required), but I like nav menus that don’t disappear and aren’t hard to find. Users might like it too.