Помещение логотипа сайта и основной навигации в липкий заголовок (или заголовок с фиксированной позицией) — определенная тенденция. Он также стал популярным для тем WordPress: проверяйте посты, подобные всем этим .
Однако на сайте WordPress липкие заголовки сталкиваются с проблемой, когда видна панель администратора. И админ-бар, и большинство position: fixed; top: 0; заголовков зависят от position: fixed; top: 0; position: fixed; top: 0; и расположены в соответствии с окном просмотра. В конечном итоге они перекрываются. Так как админ-бар имеет z-index 99999 , он обычно покрывает большую часть липкого заголовка темы (или, если заголовок выигрывает войну z-index , то он покрывает админ-панель). Давайте посмотрим, как мы можем использовать CSS (и Sass) для решения этой проблемы.
[Краткое примечание: некоторые темы используют JavaScript для позиционирования липких элементов при прокрутке страницы. Если JavaScript постоянно обновляет встроенное свойство top , методика, описанная ниже, не решит эту проблему.]
CSS для перемещения заголовка
Для простоты мы будем использовать класс .sticky-header для ссылки на элемент, который зафиксирован в верхней части страницы. Вы должны найти правильный селектор для вашей темы и использовать его. Мы также предполагаем, что его значение top позиции равно 0. Если его top смещена к чему-либо еще, вам нужно будет выполнить математические расчеты и настроить измерения ниже.
Когда панель администратора видна на .admin-bar интерфейсе, WordPress присоединяет класс .admin-bar к <body> страницы. (Это обрабатывается функцией body_class(); в header.php большую часть времени.) Этот класс позволит нам отрегулировать top позицию нашего липкого заголовка.
/* This is the existing CSS... */ .sticky-header { position: fixed; top: 0; } /* Here's the new CSS to add... */ .admin-bar .sticky-header { top: 32px; }
Это довольно управляемо, верно? Панель администратора имеет высоту 32px, поэтому мы просто перемещаем липкий заголовок вниз, и оба видимы. Единственная проблема в том, что это не всегда так просто: панель администратора не всегда имеет высоту 32px. В этом случае вам нужно будет использовать CSS.
CSS для маленьких экранов
На экранах шириной менее 783 пикселей панель администратора имеет высоту 46 пикселей. Нам нужно изменить наш код, чтобы компенсировать это:
.admin-bar .sticky-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .sticky-header { top: 46px; } }
Если вы предпочитаете CSS для мобильных устройств (как я), используйте этот код:
.admin-bar .sticky-header { top: 46px; } @media screen and (min-width: 783px) { .admin-bar .sticky-header { top: 32px; } }
Теперь у вас будет правильный заголовок, независимо от ширины экрана! Мы еще не до конца. Если вы используете Sass для создания своей темы, мы можем свернуть ее в многократно используемый миксин.
Если вы разработчик темы или создаете дочернюю тему, вы уже знаете, куда поместить этот CSS в существующие таблицы стилей. Если, с другой стороны, вы работаете с существующей темой, которая не очень хорошо обрабатывает свой липкий заголовок, и вам просто нужно вставить этот код, вы можете использовать плагин, который позволяет вставлять CSS, такой как WP Add Custom CSS или простой пользовательский CSS .
Sass для перемещения заголовка
Я собираюсь назвать этот mixin admin-sticky-fix() . Мы рассмотрим весь блок кода, а затем посмотрим, как работает каждая часть.
@mixin admin-sticky-fix( $offset: 0 ) { $narrow-offset: 46px; $wide-offset: 32px; @if $offset != 0 and type-of($offset) == 'number' { $narrow-offset: $narrow-offset + $offset; $wide-offset: $wide-offset + $offset; } .admin-bar & { top: $narrow-offset; @media screen and (min-width: 783px) { top: $wide-offset; } } }
Миксин принимает необязательный параметр: $offset . Это позволяет вам указать, что элемент имеет top значение, отличное от 0 . Если вы не укажете смещение, миксин примет 0 и будет работать с этим. Если вы вручную @if $offset в $offset , условие @if изменит значения высоты панели администратора по умолчанию для соответствия. Примечание: просто используйте целое число: модуль px не нужен, но он не сломает вещи, если вы его включите.
Наш миксин использует вложение Sass для упрощения вещей: & представляет любой селектор, из которого этот миксин называется. Так что, если вы @include его в .sticky-header , вы получите селектор вывода .admin-bar .sticky-header . Вы заметите, что медиа-запрос также вложен в селектор. Sass автоматически перемещает @media [etc] обратно в root и копирует в него текущий селектор. Этот трюк с вложением позволяет нам написать более короткий миксин.
Давайте посмотрим, как работает этот миксин:
/* Sass we write */ .sticky-header { position: fixed; top: 0; @include admin-sticky-fix; } /* CSS Output */ .sticky-header { position: fixed; top: 0; } .admin-bar .sticky-header { top: 46px; } @media screen and (min-width: 783px) { .admin-bar .sticky-header { top: 32px; } }
Если вам нужно сопоставить значение смещения, используйте миксин следующим образом:
/* Sass we write */ .sticky-header-offset { position: fixed; top: 20px; @include admin-sticky-fix(20); } /* CSS Output */ .sticky-header-offset { position: fixed; top: 20px; } .admin-bar .sticky-header-offset { top: 66px; } @media screen and (min-width: 783px) { .admin-bar .sticky-header-offset { top: 52px; } }
Наличие многоразового миксина позволяет нам быстро настроить любой элемент фиксированной позиции, чтобы компенсировать админ-панель WordPress. Мои мобильные меню часто имеют фиксированное положение, и это позволяет мне легко регулировать их top значения.
Вывод
По умолчанию липкие заголовки конфликтуют с админ-панелью WordPress, но с этими фрагментами кода исправление вполне поддается управлению. Этот гриф Sassmeister содержит миксин и несколько примеров того, как он работает. Где вы видели хорошие реализации тренда липкого заголовка и как его стилизовать в темах WordPress?