Як зробити якірні посилання в Elementor без перекриття хедером

Чому якірна навігація працює неправильно

Якірне посилання містить фрагмент URL, наприклад #pricing. Браузер знаходить на сторінці елемент з відповідним атрибутом id і прокручує його до верхнього краю вікна браузера.

Якщо над контентом є фіксований хедер висотою 80–100 пікселів, він залишається поверх сторінки й перекриває цільовий елемент. Сам механізм якірної навігації при цьому працює правильно: браузер не знає, що частина верхньої області зайнята хедером.

Важливо розрізняти CSS-клас та HTML-ідентифікатор. Посилання формату #pricing шукає саме id="pricing", а не class="pricing". Тому для надійної роботи в Elementor потрібно вказати CSS ID цільового контейнера або секції. CSS-клас можна додати додатково, але він не замінює ідентифікатор.

• Посилання: #pricing
• Цільовий елемент: id="pricing"
• Відступ від хедера: scroll-margin-top

Як налаштувати цільову секцію в Elementor

Спочатку відкрийте сторінку в редакторі Elementor і виберіть контейнер або секцію, до якої має вести якір. Саме цей елемент повинен отримати CSS ID.

У налаштуваннях вибраного елемента знайдіть поле CSS ID та введіть назву без символу решітки. Наприклад, для переходу до блоку з тарифами вкажіть pricing. У посиланні кнопки або пункту меню при цьому використовуйте #pricing.

Не додавайте пробіли, решітку або спеціальні символи без потреби. Краще використовувати короткі назви латиницею: services, contacts, faq або pricing. Ідентифікатор має бути унікальним на сторінці.

• Виберіть цільовий контейнер або секцію.
• У полі CSS ID введіть, наприклад, pricing.
• У посиланні кнопки чи меню вкажіть #pricing.
• Переконайтеся, що на сторінці немає іншого елемента з таким самим ID.

CSS-рішення через scroll-margin-top

Властивість scroll-margin-top задає невидимий запас над елементом під час прокручування до нього. Вона не додає порожній простір у макеті та не змінює фактичну висоту секції.

Якщо CSS ID цільового елемента — pricing, правило можна застосувати безпосередньо до нього. Значення 90px потрібно замінити на приблизну висоту вашого хедера.

• Для хедера висотою близько 80px можна почати зі значення 90px.
• Якщо хедер має різну висоту у стані прокручування, орієнтуйтеся на найбільше значення, яке може перекривати контент.
• Для мобільної версії задайте окремий відступ, якщо висота хедера змінюється.

#pricing {
  scroll-margin-top: 90px;
}

@media (max-width: 767px) {
  #pricing {
    scroll-margin-top: 70px;
  }
}

Якщо потрібно використовувати CSS-клас

Іноді зручніше призначити однакове правило кільком секціям. У такому випадку додайте до них клас anchor-target, а CSS ID залиште для конкретних якірних посилань. Це дозволяє централізовано керувати відступом для всіх цільових блоків.

• У CSS Classes додайте anchor-target.
• У CSS ID використовуйте унікальне значення, наприклад pricing.
• Посилання ведіть на #pricing, а не просто на назву класу.

.anchor-target {
  scroll-margin-top: 90px;
}

@media (max-width: 767px) {
  .anchor-target {
    scroll-margin-top: 70px;
  }
}

Де розмістити CSS в Elementor або WordPress

CSS можна додати на рівні конкретного елемента, сторінки або всього сайту — залежно від доступних можливостей вашої конфігурації Elementor і теми. Якщо в редакторі є поле Custom CSS, правило можна розмістити там. Для глобального застосування зручніше додати його в загальні стилі сайту або в додатковий CSS WordPress.

Якщо правило призначене для однієї сторінки, локальний CSS зменшує ризик впливу на інші шаблони. Якщо якірна навігація використовується на багатьох сторінках, глобальний стиль для класу anchor-target може бути практичнішим.

Після додавання стилів очистіть кеш плагіна оптимізації, кеш сервера або CDN, якщо вони використовуються. Інакше браузер може показувати стару версію CSS.

• Локальне правило підходить для одного або кількох блоків на конкретній сторінці.
• Глобальне правило для класу зручно використовувати в повторюваних секціях.
• Після змін перевірте сторінку в режимі інкогніто або після очищення кешу.

Як підібрати правильне значення відступу

Значення scroll-margin-top має бути не умовним, а достатнім для повного звільнення заголовка та початку контенту з-під хедера. Виміряйте фактичну висоту верхньої панелі у звичайному стані та під час прокручування.

Якщо хедер має висоту 72px, значення 80–90px зазвичай залишає невеликий запас. Якщо хедер містить два рядки, промо-смугу або змінюється після скролу, перевіряйте саме той стан, у якому перекриття помітне.

Для мобільних пристроїв не варто автоматично використовувати десктопне значення. На вузькому екрані хедер може стати вищим через перенесення елементів або, навпаки, компактнішим.

• Замалий відступ залишає заголовок частково під хедером.
• Завеликий відступ не ламає макет, але створює зайвий порожній простір після переходу.
• Перевіряйте окремо десктоп, планшет і смартфон.

Перевірка та типові помилки

Після налаштування відкрийте сторінку у звичайному режимі та натисніть кожне якірне посилання. Цільовий заголовок має бути повністю видимим під хедером, а URL повинен містити відповідний фрагмент, наприклад #pricing.

Якщо прокручування не працює, спочатку перевірте відповідність CSS ID і посилання. Значення pricing та #pricing пов’язані між собою, але id не повинен містити дубльованих символів або пробілів.

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

• Використання class замість id як єдиної точки прив’язки.
• Додавання # у поле CSS ID Elementor.
• Однаковий ID у кількох секцій.
• Застосування scroll-margin-top до хедера, а не до цільового елемента.
• Перевірка лише в редакторі без тесту опублікованої сторінки.
• Старий CSS через кеш браузера, плагіна або CDN.

Альтернатива: scroll-padding-top для всієї сторінки

Якщо потрібно виправити всі якірні переходи на сайті, можна задати верхній внутрішній відступ для області прокручування через scroll-padding-top. Це глобальний підхід: він впливатиме на всі фрагментні посилання, а не лише на окремі секції.

Для сторінки з різними хедерами або різними сценаріями навігації безпечніше використовувати scroll-margin-top на конкретних цілях. Глобальне правило варто застосовувати тоді, коли фіксований хедер має стабільну висоту на всій сторінці.

• scroll-margin-top — точкове рішення для окремих цільових блоків.
• scroll-padding-top — глобальне рішення для всіх якірних переходів.
• Якщо висота хедера різниться на пристроях, використовуйте медіазапити.

html {
  scroll-padding-top: 90px;
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 70px;
  }
}