Как сайт выглядит на телефоне и как устроено мобильное меню

На узком экране — до 768 пикселей — верхнее меню перестраивается само, настраивать ничего не нужно:

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

Какие пункты остаются в шапке, не настраивается: только логотип и приветствие. Всё остальное верхнего меню — внутри списка.

Логотип. На телефоне он вписывается по ширине, а высота из окна стилей становится его пределом. Лишней пустоты над и под логотипом не будет.

Как проверить. Откройте сайт на телефоне или сузьте окно браузера. Кнопка переключения режима администратора на телефоне стоит кружком рядом с «бутербродом».

Если не получилось

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