Header styles

The default Bear Blog theme keeps the header simple, just a title and a nav list. That leaves a lot of room to experiment, and I love experimenting.

This page collects small CSS tweaks and variations for the layout and structure of the header. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 5 minutes ago.

Tighter spacing

Tighter title and nav spacing

/* Header: tighter spacing | robertbirming.com */
header .title h1 {
  margin-block-end: 0;
}

header nav p {
  margin-block-start: 0.2em;
}

Centered

Centered header

/* Header: centered | robertbirming.com */
header {
  text-align: center;
}

header .title h1 {
  margin-block-end: 0;
}

header nav p {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 0.2em;
}

Inline

Inline header

/* Header: inline | robertbirming.com */
header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}

header .title h1 {
  margin-block-end: 0;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 0;
}

Inline split

Inline split header

/* Header: inline split | robertbirming.com */
header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}

header .title h1 {
  margin-block-end: 0;
}

header nav {
  margin-inline-start: auto;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 0;
}

Bottom border

Bottom border header

/* Header: bottom border | robertbirming.com */
header {
  padding-block-end: 1rem;
  border-block-end: 1px solid;
}

header .title h1 {
  margin-block-end: 0;
}

header nav p {
  margin-block-start: 0.2em;
}

Pill nav links

/* Header: pill nav links | robertbirming.com */
header .title h1 {
  margin-block-end: 0;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-block-start: 0.5em;
  font-size: 0.85em;
}

header nav a {
  padding: 2px 10px;
  border: 1px solid;
  border-radius: 999px;
  text-decoration: none;
}

Uppercase nav links

/* Header: uppercase nav links | robertbirming.com */
header .title h1 {
  margin-block-end: 0;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 0.5em;
}

header nav a {
  font-size: 0.8em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

Dot marker nav links

/* Header: dot marker nav links | robertbirming.com */
header .title h1 {
  margin-block-end: 0;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 0.5em;
}

header nav a {
  text-decoration: none;
}

header nav a::before {
  content: "•" / "";
  margin-inline-end: 4px;
  color: var(--link-color);
}

Stacked nav links

/* Header: stacked nav links | robertbirming.com */
header .title h1 {
  margin-block-end: 0;
}

header nav p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block-start: 0.5em;
}

Thick underline nav links

/* Header: thick underline nav links | robertbirming.com */
header .title h1 {
  margin-block-end: 0;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-block-start: 0.5em;
}

header nav a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

Boxed nav

/* Header: boxed nav | robertbirming.com */
header .title h1 {
  margin-block-end: 0;
}

header nav p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: fit-content;
  margin-block-start: 0.5em;
  padding: 6px 12px;
  border: 1px solid;
}

header nav a {
  text-decoration: none;
}

Dashed border

Dashed border header

/* Header: dashed border | robertbirming.com */
header {
  padding: 0.2rem 1.5rem;
  border: 3px dashed;
}

header .title h1 {
  margin-block-end: 0;
}

header nav p {
  margin-block-start: 0.2em;
}

Accent border

Accent border header

/* Header: accent border | robertbirming.com */
header {
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--link-color);
}

header .title h1 {
  margin-block-end: 0;
}

header nav p {
  margin-block-start: 0.2em;
}

Avatar

/* Header: avatar | robertbirming.com */
:root {
  --avatar-url: url("https://example.com/your-avatar.jpg");
  --avatar-size: 3rem;
  --avatar-radius: 50%; /* For a square, try 5px */
}

header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
}

header::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  width: var(--avatar-size);
  aspect-ratio: 1;
  background: var(--avatar-url) center / cover no-repeat;
  border-radius: var(--avatar-radius);
}

header .title h1 {
  margin-block-end: 0;
}

header nav p {
  margin-block-start: 0.2em;
}

Card

Card header

/* Header: card | robertbirming.com */
header {
  padding-block: 1rem;
  padding-inline: 1.2rem;
  text-align: center;
  background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
  border-radius: 8px;
}

header .title h1 {
  margin-block-end: 0;
}

header nav p {
  margin-block-start: 0.7rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid color-mix(in srgb, var(--text-color), transparent 80%);
}

Have fun making the header your own.

Want more? Check out the full Bear Blog library.