Top Navigation

Style the second header row shown when a project uses per-area top navigation.

1 MIN READ

This page is about appearance: config/styles/topnav.css. To set up top navigation itself, the per-area sections and which sidenav each links to, see Top Navigation under Configuration instead.

When a project uses config/navigation/topnav.yaml, Header renders a second row below the primary one. See Header for where this row sits. Each link fills the row's full height, with a bottom border marking the active one.

Open the override file

Text

config/styles/topnav.css

Tokens

Token	What it controls
`--topnav-link-padding`	Horizontal padding of each link.
`--topnav-link-font-size`	Font size of each link.
`--topnav-active-border-width`	Thickness of the bottom border marking the active link.
`--topnav-active-border-color`	Color of that border. Defaults to `--accent-emphasis`.

Example topnav.css

A config/styles/topnav.css that sets every token on this page, for both light and dark mode:

Css

:root {
  --topnav-link-padding: 0.75rem;
  --topnav-link-font-size: 0.875rem;
  --topnav-active-border-width: 3px;
  --topnav-active-border-color: #0f766e;
}

.dark {
  --topnav-active-border-color: #2dd4bf;
}

Next step

Style the language picker.