Техническое задание: Доработка шапки сайта
Цель проекта
Привести верхнюю часть сайта (шапку) к аккуратному и профессиональному виду. Все элементы должны быть выровнены, типографика - читаемой, а адаптивность - безупречной на всех устройствах.
Ключевые проблемы для устранения
- Бренд-блок (логотипы и название) выглядит разрозненно, большие расстояния между элементами.
- Главное меню не вмещает все пункты на стандартных разрешениях экрана, последний пункт переносится на вторую строку.
- Неудачная типографика и интервалы, создающие впечатление "разваленной" композиции.
- Отсутствие единой логики адаптации при изменении ширины окна браузера.
- На мобильных устройствах меню-бургер может отображаться некорректно.
Обязательные работы
A. Редизайн бренд-блока (левая часть шапки)
- Объединить три элемента (два логотипа и текстовое название) в единый, визуально цельный блок.
- Выровнять все элементы по вертикали (по базовой линии или по центру).
- Существенно уменьшить расстояния (gap) между элементами внутри блока.
- Задать фиксированную высоту для логотипов с сохранением пропорций:
- Для десктопа: 44-48 пикселей.
- Для мобильных устройств: 32-36 пикселей.
B. Оптимизация главного меню (десктопная версия)
Главное требование: все пункты меню должны оставаться в одной строке.
- Добавить в существующее меню новый пункт "Контакты".
- Гарантировать, что меню не переносится на вторую строку при следующих стандартных разрешениях:
- Если после добавления пункта меню не помещается по ширине - предложить и согласовать оптимальное решение (например, уменьшение межбуквенных интервалов, изменение шрифта, компактное выпадающее меню). Второй ряд пунктов недопустим.
C. Адаптивность и мобильная версия
- Настроить корректную работу меню-бургера на мобильных устройствах без визуальных "развалов".
- Обеспечить плавную и логичную трансформацию всех элементов шапки при изменении ширины экрана.
Обязательные брейкпоинты для проверки
Работоспособность и аккуратность верстки необходимо проверить на следующих ширинах экрана: 1440px, 1280px, 1024px, 768px, 480px, 375px.
Технические условия
- Работа выполняется в рамках конструктора страниц Elementor (Pro).
- Изменения вносятся через визуальный редактор и настройки виджетов, с возможным добавлением минимального пользовательского CSS для тонкой настройки.
- Цель - достичь результата без нарушения общей структуры и функциональности сайта.