Як сайт виглядає на телефоні та як влаштоване мобільне меню

На вузькому екрані — до 768 пікселів — верхнє меню перебудовується само, налаштовувати нічого не потрібно:

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

Які пункти залишаються в шапці, не налаштовується: лише логотип і привітання. Усе інше верхнього меню — всередині списку.

Логотип. На телефоні він вписується по ширині, а висота з вікна стилів стає його межею. Зайвої порожнечі над логотипом і під ним не буде.

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

Якщо не вийшло

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