Как изменить размер шапки в битриксе

Шапка сайта в Битрикс чаще всего формируется через компоненты и шаблоны, хранящиеся в папке /bitrix/templates/. Размер элементов регулируется через CSS-файлы и, в отдельных случаях, через параметры в настройках компонентов. Поэтому изменение высоты или ширины шапки требует вмешательства как минимум в один из этих источников.

Если используется стандартный шаблон, начните с файла header.php и стилей, подключаемых в style.css или template_styles.css. Найдите класс, отвечающий за контейнер шапки (например, .header или .top-panel), и задайте нужные значения height, padding и margin. Изменения сразу отразятся при обновлении страницы, если отключено кэширование.

В адаптивных шаблонах изменения могут потребовать правки медиазапросов. Например, высота шапки на мобильных устройствах может задаваться отдельно в блоках @media screen and (max-width: 768px). Эти участки кода находятся в отдельных стилевых файлах или в конце основного CSS-файла.

Если сайт использует визуальный редактор или компонентную структуру с включаемыми областями, настройку можно упростить, вынеся стили в пользовательский CSS и подключив его через административную панель (Настройки → Настройки продукта → Сites → Шаблоны сайтов), чтобы избежать конфликтов при обновлении шаблона.

Определение текущих параметров шапки в шаблоне сайта

Откройте каталог с шаблоном сайта, как правило, это /bitrix/templates/название_шаблона/. Найдите файл header.php, в нём размещена структура шапки.

Проверьте наличие подключаемых CSS-файлов. Обычно стили шапки определяются в style.css или template_styles.css, которые подключаются в header.php через $APPLICATION->SetAdditionalCSS() или обычной ссылкой <link rel="stylesheet" href="...">.

Откройте CSS-файл и найдите селекторы, начинающиеся с .header, #header или аналогичных классов. Обратите внимание на свойства height, padding, margin, position, z-index, background. Эти параметры напрямую влияют на размер и отображение шапки.

Проверьте, используется ли адаптивная верстка. В файле CSS найдите медиазапросы @media, которые могут переопределять параметры шапки для разных разрешений экрана.

Если применяются сторонние компоненты (например, меню), откройте их шаблоны в папке /bitrix/components/bitrix/menu/templates/название_шаблона/ и проверьте CSS-файлы и разметку.

Запустите инструменты разработчика в браузере (F12), выделите шапку на сайте и изучите реальные размеры и применённые стили в панели «Elements» и «Computed». Это позволит увидеть финальные значения, включая те, что заданы через JavaScript или переопределены другими стилями.

Редактирование CSS для изменения высоты шапки

Откройте файл стилей, который подключён к шаблону сайта. Обычно это template_styles.css или style.css внутри директории /bitrix/templates/название_шаблона/styles/.

Найдите селектор, отвечающий за шапку. В большинстве случаев это .header, #header или .top-panel. Если класс определить затруднительно, используйте инструменты разработчика браузера (F12) и выделите нужный элемент.

Добавьте или измените правило height. Например:

.header {
height: 120px;
}

Если используются внутренние отступы, проверьте наличие свойства padding. Оно также влияет на итоговую высоту:

.header {
padding: 20px 0;
}

При наличии фиксированной шапки обязательно проверьте, что она не перекрывает основной контент. Добавьте отступ к первому блоку после неё, например:

.main-content {
margin-top: 120px;
}

Если высота задаётся через flex или grid, контролируйте поведение дочерних блоков. Пример для flex:

.header {
display: flex;
align-items: center;
height: 100px;
}

После изменений очистите кэш браузера и, при необходимости, сбросьте кеш в административной панели Битрикс: Настройки → Кэширование → Управление.

Использование визуального редактора Битрикс для корректировки шапки

Визуальный редактор в Битрикс позволяет вносить изменения в шапку сайта без доступа к коду. Работает только при включённом режиме правки и наличии соответствующих прав пользователя.

1. Авторизуйтесь в административной части сайта.
2. Включите режим правки: кликните по шестерёнке в верхней панели и выберите «Включить режим правки».
3. Наведите курсор на область шапки. Отобразится рамка с кнопкой «Редактировать» или значком карандаша.
4. Нажмите на кнопку. Откроется визуальный редактор, в котором можно изменить текст, загрузить логотип, настроить контактную информацию.
5. Для замены логотипа: нажмите на изображение, выберите «Загрузить», укажите файл на компьютере.
6. Для изменения контактных данных: отредактируйте текстовые блоки, сохраните изменения кнопкой «Сохранить» в правом верхнем углу.

Если элементы шапки не редактируются через визуальный интерфейс, они могут быть вынесены в отдельные include-файлы. В таком случае:

• Кликните по области с заголовком или телефоном правой кнопкой мыши и выберите пункт «Редактировать область».
• Откроется встроенный редактор для include-файла. Внесите изменения и сохраните их.

После всех правок обновите страницу и проверьте отображение на мобильных устройствах через режим адаптивной проверки в браузере.

Настройка адаптивности шапки под разные устройства

Для корректного отображения шапки сайта на экранах с разным разрешением требуется настроить адаптивные стили. В шаблонах Битрикс чаще всего используется CSS-фреймворк (например, Bootstrap) или собственная медиаструктура.

• Используйте медиазапросы @media для изменения отступов, размеров шрифта и порядка блоков в зависимости от ширины экрана.
• Ограничьте максимальную высоту шапки на мобильных устройствах: @media (max-width: 767px) { header { max-height: 80px; } }.
• Спрячьте второстепенные элементы (например, дополнительное меню или телефон) через display: none на узких экранах.
• Проверьте использование Flexbox или Grid – они позволяют легко переупорядочить блоки при изменении ширины экрана.
• Замените горизонтальное меню на бургер с помощью компонента bitrix:menu и кастомной иконки. Управляйте отображением через классы и JS.
• Добавьте viewport в <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
• Проверяйте адаптивность с помощью встроенного режима в Chrome DevTools: устройства от 320px до 1440px, а также ориентации портрет и альбом.

Для сложных шаблонов с фиксированными блоками применяйте position: absolute или sticky с учетом контекста, избегая конфликтов с другими элементами страницы. Всегда проверяйте итоговую высоту шапки и перекрытие контента ниже.

Изменение размера логотипа в шапке через настройки шаблона

Откройте административную панель и перейдите в раздел «Настройки» → «Настройки продукта» → «Сайты» → «Шаблоны сайтов». Найдите активный шаблон и нажмите «Редактировать».

В каталоге шаблона откройте файл header.php или включаемую область, где размещён логотип. Обычно используется тег <img> с атрибутами width и height, либо применяется CSS-класс с установленными размерами.

Если размеры заданы через CSS, найдите соответствующий класс в файле style.css или template_styles.css. Измените свойства width и height на нужные значения в пикселях или процентах. Например: .logo { width: 150px; height: auto; }.

После сохранения изменений очистите кеш через меню «Настройки» → «Кеширование» → «Очистить кеш». Затем проверьте результат на сайте и в адаптивной версии.

Если логотип адаптивный и использует max-width, задайте фиксированные размеры только для нужных разрешений с помощью медиазапросов. Например:

@media (min-width: 1024px) {
.logo { width: 180px; }
}

Избегайте увеличения размеров изображения без соответствующего качества исходника, иначе логотип станет размытым. При необходимости замените файл логотипа на более крупный с сохранением пропорций.

Обновление стилей через подключение пользовательского CSS

Чтобы изменить размер шапки сайта в Битрикс без правки стандартных файлов шаблона, создайте и подключите собственный CSS-файл. Это позволит внести изменения, которые не будут перезаписаны при обновлениях.

Создайте файл, например custom.css, и поместите его в каталог шаблона: /bitrix/templates/имя_шаблона/css/. Если папки нет – создайте вручную.

Добавьте подключение файла в header.php шаблона, перед закрывающим тегом </head>:

<link rel="stylesheet" href="/css/custom.css">

В файле custom.css задайте нужные параметры. Пример уменьшения высоты шапки:

header.site-header {
height: 60px;
padding: 10px 20px;
}

Если шапка использует другие классы, определите их через инспектор браузера. Избегайте !important, если не требуется принудительное переопределение встроенных стилей.

После изменений очистите кэш Битрикс: Настройки → Производительность → Управление кешем или удалите вручную содержимое папки /bitrix/cache/.

Проверка результата изменений на тестовом сайте

После правки размеров шапки сайта в шаблонных файлах или стилях, необходимо убедиться, что изменения корректно отображаются. Создайте копию основного сайта в поддомене или на отдельной тестовой установке Битрикс. Убедитесь, что структура директорий и набор компонентов идентичны боевой версии.

Откройте тестовый сайт в браузере и проверьте внешний вид шапки на всех типах устройств: десктоп, планшет, смартфон. Используйте инструменты разработчика (F12), чтобы проанализировать применённые CSS-правила и убедиться, что новые размеры подставлены корректно и не переопределяются другими стилями.

Проверьте поведение шапки при прокрутке страницы, взаимодействии с меню и при изменении масштаба. Обратите внимание на отступы, адаптивность, выравнивание логотипа и элементов навигации. Включите режимы просмотра популярных разрешений (например, 1920×1080, 1366×768, 375×667).

Очистите кэш компонента и браузера, затем проверьте, обновились ли стили. В Битриксе выполните сброс композита, если он активен: Настройки → Производительность → Композитный сайт. Убедитесь, что изменения не влияют на функциональность личного кабинета, корзины и других модулей в шапке.

Если используются CDN или прокси, проверьте, что изменения загружаются из актуального источника. Используйте инструменты вроде curl или DevTools → Network для анализа путей загрузки CSS-файлов и HTML-разметки.

Восстановление исходного размера шапки при необходимости

Если изменения размера шапки оказались неудачными, вернуться к исходному виду можно несколькими способами. Прежде всего, найдите резервную копию изменённого файла. Обычно это header.php или файл с кастомной разметкой, например header_custom.php, если он создавался отдельно. Если копия не сохранилась, воспользуйтесь репозиторием шаблона – в стандартной теме оригинальный код шапки находится в папке /bitrix/templates/.default/.

При использовании CSS изменений проверьте файл style.css или template_styles.css. Удалите или закомментируйте строки с изменёнными параметрами height, padding или margin внутри селекторов, связанных с шапкой. Например:

/* .header { height: 120px; padding-top: 20px; } */

Если правки вносились через визуальный редактор в административной части, вернитесь в раздел «Редизайн сайта» или «Шаблоны сайта» и отмените изменения, нажав «Вернуть по умолчанию» или вручную удалив ненужные блоки.

После отката изменений очистите кэш: в административной панели перейдите в «Настройки» → «Кеширование» и нажмите «Очистить». Также стоит проверить, не кэшируется ли содержимое браузером – обновите страницу с нажатием Ctrl + F5.

Если были изменены компоненты или подключённые модули, восстановите старую версию через список компонентов: удалите переопределённые шаблоны из /local/templates/название_шаблона/components/bitrix.

Вопрос-ответ: