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

← Назад

На экране до 768 пикселей в шапке остаются логотип и приветствие, остальные пункты прячутся под кнопку-«бутерброд» и раскрываются списком.

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

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

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

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

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

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

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

Смотрите также

Как поставить логотип и фавиконкуОбе картинки загружаются в настройках информера «Логотип» — полями «Логотип» и «Фав-иконка».Как оформить блок: рамка, фон, отступы, теньНаведите на блок и нажмите шестерёнку — откроется окно стилей с вкладками «Граница», «Блок», «Текст», «Ссылки», «Анимация», «Позиционирование».Как добавить счётчик или чужой виджет на все страницыВкладка «О сайте» в общих настройках, поле «HTML-код виджетов» — код вставляется на каждую страницу сайта.Что такое информеры в менюЭто маленькие виджеты, которые стоят в меню наравне с пунктами: логотип, корзина, поиск, переключатель языка, чат и другие.

Подсказки для работы с конструктором

Раздел «Помощь» создан для тех, кто впервые собирает сайт на «Первой линии». Здесь собраны ответы на частые вопросы: как создать сайт, что писать в полях, как редактировать тексты и фотографии, как подключить собственный домен и настроить разделы. Материалы помогут разобраться без обращения в поддержку.

Конструктор устроен просто: вы заполняете поля на странице создания, а затем правите содержимое прямо на готовом сайте. Если что-то не получается или непонятно, загляните в соответствующий пункт помощи. Инструкции написаны простым языком и описывают каждый шаг.

В помощи вы найдёте ответы на вопросы:

  • как придумать адрес сайта и что делать, если имя занято;
  • как изменить название, описание и другие тексты на странице;
  • как добавить товары, услуги или формы заявок;
  • как подключить свой домен вместо адреса на firstline.com.ua;
  • как настроить разделы и модули под задачи вашего дела.

Если нужного ответа не нашлось, воспользуйтесь формой обратной связи — мы поможем разобраться. Раздел обновляется, чтобы вы всегда могли найти актуальную информацию по работе с конструктором.