Hiding and Showing

The last part that doesn't fit on a phone is the navigation: the logo, three links and the Donate button need more room than a phone's screen has. Most websites solve this the same way: on a phone, they hide the links and show a Menu button instead, which shows the links when it's tapped. On a computer, you see the links and not the button.

We've added a Menu button to the header, like the one you hid with hidden in the lesson Flexbox, Grid and Position. It's the button element next to Donate, and to keep the two together on the right, both are in a new div with the classes flex gap-2. For now, the button is visible at every width.

To hide an element, you know the class hidden (display: none) from the lesson Flexbox, Grid and Position. With a prefix, you can change display at a breakpoint:

• hidden md:flex: hidden on a phone, and from 768 px up, a flex container. Instead of md:flex, it can be md:block or md:grid, depending on what the element should be.
• md:hidden: visible on a phone, hidden from 768 px up.

An element with display: none disappears completely: it takes up no space, and the elements around it close up as if it weren't there.

A real menu needs a bit of JavaScript to show the links when the button is clicked, and you'll learn that in the JavaScript course. On our page, the button only stands in its place, so clicking it does nothing.

(Tailwind also has prefixes that work the other way round: max-md: applies a class only below 768 px. Mobile first, you'll rarely need them.)