Скрыть и показать

Последняя часть, которая не помещается на телефоне, — навигация: логотипу, трём ссылкам и кнопке «Пожертвовать» нужно больше места, чем есть на экране телефона. Большинство сайтов решают это одинаково: на телефоне прячут ссылки и вместо них показывают кнопку «Меню», которая по нажатию открывает эти ссылки. На компьютере видны ссылки, а кнопки нет.

Мы добавили в шапку кнопку «Меню», похожую на ту, которую вы скрывали классом hidden в уроке «Flexbox, Grid и позиционирование». Это элемент button рядом с кнопкой «Пожертвовать», а чтобы обе оставались вместе справа, они лежат в новом div с классами flex gap-2. Пока кнопка видна при любой ширине.

Чтобы скрыть элемент, есть класс hidden (display: none), его вы знаете по уроку «Flexbox, Grid и позиционирование». С префиксом можно менять display на нужной контрольной точке:

• hidden md:flex: скрыт на телефоне, а начиная с 768 px — flex-контейнер. Вместо md:flex может быть md:block или md:grid, смотря чем должен быть элемент.
• md:hidden: виден на телефоне, а начиная с 768 px скрыт.

Элемент с display: none исчезает полностью: он не занимает места, и соседние элементы смыкаются, как будто его и не было.

Настоящему меню нужно немного JavaScript, чтобы по нажатию на кнопку показывать ссылки, и этому вы научитесь в курсе JavaScript. На нашей странице кнопка просто стоит на своём месте, поэтому нажатие ничего не делает.

(В Tailwind есть и префиксы, которые работают наоборот: max-md: применяет класс только при ширине меньше 768 px. По принципу mobile first они нужны редко.)