Липкий заголовок для WordPress меняет размер и размер логотипа при прокрутке вниз.

На чтение 3 мин Опубликовано 29.09.2024

Вопрос или проблема

Я использую Themify для создания своего сайта.

У меня частично построен параллакс-сайт, однако при прокрутке вниз мой логотип и заголовок меняют размер. Это фиксированный заголовок, который переходит от прозрачного к цветному. Где я могу найти параметры для изменения этого в конструкторе Themify? Я просто хочу сохранить размер постоянным при прокрутке вниз.

Вот сайт: http://willwiseman.us

Вы можете изменить стиль в пользовательском CSS-коде в параметрах темы или установить плагин пользовательского CSS или изменить основные CSS-файлы.

1.- Для размера логотипа в фиксированном заголовке добавьте этот код в пользовательский CSS или измените файл в
/wp-content/themes/themify-ultra/styles/header-horizontal.css строка#21 измените высоту на 60px вместо 30px.

.fixed-header-on #site-logo img {
  height: 60px;
  width: auto;
  transition: all .3s;
}

2.- Для цвета фона фиксированного заголовка добавьте следующий код в пользовательский CSS или измените в:

.transparent-header #headerwrap.fixed-header {
  background-color: transparent;
}

Ответ или решение

Для решения проблемы изменения размера логотипа и заголовка при прокрутке на вашем сайте, созданном с помощью Themify, вам нужно внести коррективы в CSS-стили. Вот пошаговое руководство по настройке фиксированного заголовка.

Настройка размера логотипа в фиксированном заголовке:
Чтобы установить постоянный размер для логотипа в фиксированном заголовке, добавьте следующий код в настройки пользовательского CSS вашего шаблона. Вы можете найти эту опцию в админ-панели WordPress: перейдите в "Themify" -> "Настройки" -> "Дополнительные настройки" или используйте плагин для пользовательского CSS.

Вот код, который нужно добавить:
```
.fixed-header-on #site-logo img {
 height: 60px;  /* Установите желаемую высоту логотипа */
 width: auto;   /* Ширина будет автоматически подстраиваться */
 transition: all .3s;  /* Плавный переход при изменении */
}
```
Замените 60px на желаемую высоту вашего логотипа.
Настройка цвета фона фиксированного заголовка:
Если вы хотите изменить цвет фона фиксированного заголовка на непрозрачный при прокрутке, добавьте следующий код в пользовательский CSS:
```
.transparent-header #headerwrap.fixed-header {
 background-color: #ffffff; /* Установите желаемый цвет фона */
}
```
Замените #ffffff на нужный вам цвет (в шестнадцатиричном формате).
Проверка изменений:
После добавления кода в пользовательский CSS, убедитесь, что вы сохранили изменения и очистили кэш вашего браузера (если используете кэширующий плагин), после чего обновите страницу сайта. Проверьте, чтобы логотип и заголовок сохраняли свой размер и цвет во время прокрутки.
Дополнительные ограничения:
Если после изменений вы все еще сталкиваетесь с проблемами изменения размера, возможно, в других CSS-файлах или скриптах вашей темы также содержатся конфликты. Вам стоит проверить файлы стилей на наличие любых других правил, которые могут переопределять ваши настройки.

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