v138 · css

Responsive Nav

A navigation bar that uses sibling-count() to adapt its density — padding, font-size, and icon scale shrink as more items are added, keeping the bar usable without any JavaScript layout detection.

Feature detection: checking…
Items:
Adaptive nav — 5 items font/padding scale via sibling-count()
Select a nav item above.

fixed 8-item nav — with vs without sibling-count()

Without sibling-count() — fixed padding
With sibling-count() — adaptive
/* Padding and font-size shrink as more items are added */
.nav a {
  flex: 1;
  padding: calc(0.7rem - sibling-count() * 0.03rem) 0.3rem;
  font-size: calc(0.85rem - sibling-count() * 0.03rem);
}

/* Icon grows slightly to compensate */
.nav a .icon {
  font-size: calc(1.1rem + sibling-count() * 0.05rem);
}

references

see also