Do the arithmetic before you hide the labels

On small screens my homepage nav collapsed to bare numbers. 1, 2, 3, 4. Only the current section had a name.

It looked tidy. It told you nothing.

My nav on a phone, marked up

So I measured instead of assuming. At 390 pixels wide there were 262 pixels between the logo and the theme button. The four labels needed about 245. They fit.

You can check yours in a minute. Open the site at 390px, and paste this into the console:

[...document.querySelectorAll('nav a')].reduce((w, a) => w + a.getBoundingClientRect().width, 0)

If the total fits between your fixed controls, keep the names. Müller-Brockmann called the grid a working tool, and working tools get measured.

Before you collapse a nav

Count the space before you decide there is none.

Want it as slides? Download the carousel.