Якщо потрібно прибрати певні інформаційні сторінки (наприклад, «Про нас», «Оплата і доставка», «Контакти») лише з верхнього меню сайту, але залишити їх у футері, це можна зробити за допомогою CSS.
Важливо
У цій статті наведено приклади CSS, які допоможуть реалізувати оформлення, недоступне стандартними інструментами платформи.
Такі зміни виконуються власником магазину або його розробником самостійно.
Служба підтримки не надає консультацій щодо написання, адаптації чи налагодження індивідуального CSS-коду. Наша мета проінформувати вас про технічну можливість реалізації такого рішення.
Загальний принцип
Потрібно знайти HTML-код потрібного пункту меню та приховати його за допомогою CSS.
Важливо: залежно від шаблону або структури конкретного сайту селектори можуть відрізнятися. Тому спочатку варто перевірити HTML-код через інструменти розробника (F12).
Приклад 1
Якщо пункт меню має такий вигляд:
<a class="site-menu__link" href="/pro-nas/">Про нас</a>
його можна приховати так:
.header .site-menu__link[href="/pro-nas/"] {
display: none;
}
Приклад 2
На деяких шаблонах структура меню може відрізнятися. Наприклад:
<a href="/about/">Про нас</a>
У такому випадку достатньо такого CSS:
.header .site-menu a[href="/about/"] {
display: none;
}
Як знайти потрібний селектор
- Відкрийте сайт.
- Натисніть F12.
- За допомогою інструмента вибору елемента натисніть на потрібний пункт меню.
- У HTML знайдіть тег
<a>та зверніть увагу на:
- клас елемента (
class); - адресу сторінки (
href).
Саме ці атрибути використовуються для створення CSS-селектора.
Налаштування селектора додаєте через Налаштування - Утиліти - Редактор CSS:
Підсумок
Універсального CSS-коду для всіх сайтів немає, оскільки структура меню може відрізнятися навіть між шаблонами. Проте алгоритм завжди однаковий:
- знайти HTML потрібного пункту меню;
- визначити його
hrefабо клас; - створити CSS-селектор саме для цього елемента;
- приховати його лише в хедері, не зачіпаючи футер.