Решаем проблему накладки тулбара на меню в Вордпресс
Опубликовано: 06.09.2018
Наверное, не сосчитать, сколько раз ко мне обращались с вопросом, почему в Вордпресс возникает накладка тулбара на навигационное меню. Проблема связана с одинаковым позиционированием фиксированных блоков и сегодня я покажу, как она решается.
Сразу договоримся, не называть тулбар админ баром. Потому что админ бара в Вордпресс нет уже с версии 3.3. Сейчас он называется тулбар. И точка.
Побороть это вечное противостояние фиксированных блоков очень просто, но сначала покажу на живом примере, о чем вообще идет речь.
Вот так выглядит накладка тулбара на меню. Пользоваться в таком виде навигацией сайта практически нереально.
В идеале должно быть так.
Мне встречались разные способы решения этой проблемы. От простейших до каких-то сложных с использованием PHP, jQuery. Все решения сводятся к одному: определить, выводится ли тулбар и сместить фиксированный блок вниз на высоту тулбара — 28 px.
Себе на вооружение я взял самый простой и 100% рабочий способ с использованием одного CSS.
У этого способа есть только один недостаток, если можно так выразиться. В теме должна быть задействована функция body_class() . Отсутствие этой функции скорее даже недостаток темы, а не данного способа.
Функция body_class() добавляет к тегу <body> список классов, относящиеся к текущей странице.
Сложно представить тему без функции body_class(), отсутствие которой, например, может стать преградой для добавления темы в официальную директорию Вордпресс или на маркетплейсы. Даже если тема не будет распространяться, мне, как разработчику, не очень понятен смысл отказа от её использования. Функция body_class() очень полезна и упрощает решение многих повседневных задач. Наверное, просто некоторые разработчики не очень внимательно читают Кодекс Вордпресс. Больше объяснений нет.
Итак, как я уже сказал выше, нам нужно решить две простые задачи.
1. Определить, выводится ли тулбар
С помощью body_class() сделать это очень просто. Если пользователь авторизован и тулбар активен, тег <body> будет содержать классы logged-in и admin-bar .
Затем выясняем класс нашего фиксированного блока, с которым конфликтует тулбар. Это можно сделать прямо в Chrome DevTools .
В моем примере прилепленным сверху оказался весь блок <header>. Об этом явно говорят position:fixed и top:0.
2. Сместить фиксированный блок на высоту тулбара
Теперь, когда мы знаем класс фиксированного меню и можем идентифицировать страницы с тулбаром, можно переходить непосредственно к смещению.
body.logged-in.admin-bar header { top: 28px; }Если на мобильной версии сайта меню тоже фиксированное, можно пойти тем же путем, зафиксировав тулбар и сместив меню на 46 px — высоту мобильного тулбара Вордпресс.
Делается это с помощью медиа-запроса.
@media (max-width: 767px) { #wpadminbar { position: fixed; } body.logged-in.admin-bar header { top: 46px; } }Куда добавлять стили в тему и как правильно её кастомизировать я уже рассказывал.
Если нужно повысить узнаваемость бренда, раскрутить новое направление, привлечь новых клиентов, увеличить конверсию и просто иметь стабильно высокие позиции в поиске, без помощи SEO-специалистов не обойтись. https://webakula.ua/service/seo/ — продвижение сайта, раскрутка сайтов.
Всё самое новое и интересное я публикую в своём Телеграм-канале . Подписывайтесь!