Документация › Шорткоды и код

CSS: основы

Всё, что не настраивается в панели, меняется CSS. Здесь — куда писать код, как устроена разметка меню и какие классы использовать.

Куда писать CSS

Место	Когда использовать
Общие настройки → Пользовательский CSS	Рекомендуется. Три поля: для всех экранов, только мобильное (код сам оборачивается в медиазапрос до контрольной точки) и только компьютер. Сохраняется при обновлениях плагина.
Внешний вид→Настроить→Дополнительные стили	Если вы держите весь CSS сайта в одном месте. Подключается после стилей плагина.
`style.css` дочерней темы	Для разработчиков: код в системе контроля версий.
`custom/custom.css` в папке плагина	Только с флажком «Загружать пользовательскую таблицу стилей». Файл заменяется при обновлении плагина — держите копию.

Разметка меню

Упрощённая разметка пункта с мегаподменю на витрине (лишние классы убраны):

HTML

<!-- кнопка мобильного меню (видна ниже контрольной точки) -->
<button class="eldermenu-responsive-toggle eldermenu-responsive-toggle-main eldermenu-skin-dark"
        data-eldermenu-target="eldermenu-main-165-primary">…Меню</button>

<nav id="eldermenu-main-165-primary"
     class="eldermenu eldermenu-main eldermenu-menu-165 eldermenu-loc-primary
            eldermenu-horizontal eldermenu-skin-dark eldermenu-responsive …">
  <ul class="eldermenu-nav">

    <!-- пункт верхнего уровня с мегаподменю -->
    <li class="eldermenu-item eldermenu-item-level-0 eldermenu-item-2594
               eldermenu-has-submenu-drop eldermenu-has-submenu-mega">
      <a class="eldermenu-target" href="/megamenyu/">
        <span class="eldermenu-target-title eldermenu-target-text">Мегаменю</span>
        <i class="eldermenu-sub-indicator fas fa-angle-down"></i>
      </a>
      <ul class="eldermenu-submenu eldermenu-submenu-type-mega eldermenu-submenu-drop
                 eldermenu-submenu-align-full_width">

        <!-- заголовок колонки со списком под ним -->
        <li class="eldermenu-item eldermenu-item-header eldermenu-item-level-1
                   eldermenu-column eldermenu-column-1-4 eldermenu-has-submenu-stack">
          <span class="eldermenu-target">…С описаниями</span>
          <ul class="eldermenu-submenu eldermenu-submenu-type-stack">
            <li class="eldermenu-item eldermenu-item-normal eldermenu-item-level-2">
              <a class="eldermenu-target eldermenu-target-with-image eldermenu-item-layout-image_left">
                <img class="eldermenu-image eldermenu-image-size-thumbnail" …>
                <span class="eldermenu-target-title eldermenu-target-text">Мастер и Маргарита</span>
                <span class="eldermenu-target-divider"> – </span>
                <span class="eldermenu-target-description eldermenu-target-text">Михаил Булгаков</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Как выбрать нужное

Что	Селектор
Все мегаменю сайта	`.eldermenu`
Меню одной конфигурации	`.eldermenu-main`, `.eldermenu-footer` (по ID конфигурации)
Конкретное меню WordPress	`.eldermenu-menu-165` (ID меню)
Меню в области темы	`.eldermenu-loc-primary`
Меню со скином	`.eldermenu-skin-dark`
Пункты верхнего уровня	`.eldermenu-item-level-0 > .eldermenu-target`
Один пункт	`.eldermenu-item-2594` (ID пункта виден в панели MegaMenu: `#menu-item-2594`) или свой класс из поля WordPress «CSS-классы»
Заголовки колонок	`.eldermenu-item-header > .eldermenu-target`
Обычные пункты подменю	`.eldermenu-submenu .eldermenu-item-normal > .eldermenu-target`
Мегаподменю / выпадающее	`.eldermenu-submenu-type-mega` / `.eldermenu-submenu-type-flyout`
Подменю конкретного пункта	`.eldermenu-submenu-id-2594`
Кнопка мобильного меню	`.eldermenu-responsive-toggle`

Классы состояний

Класс	Где	Когда
`eldermenu-active`	`li`	подменю пункта открыто (наведение, клик, касание)
`eldermenu-current-menu-item`, `…-parent`, `…-ancestor`	`li`	пункт текущей страницы и его родители
`eldermenu-highlight`	`a`	включено «Подсветить ссылку»
`eldermenu-responsive-collapse`	`nav`	мобильное меню закрыто
`eldermenu-responsive-toggle-open`	кнопка	мобильное меню открыто
`eldermenu-sticky-stuck`, `eldermenu-sticky-hidden`	обёртка липкого меню	меню закреплено / спрятано при прокрутке вниз
`eldermenu-item-mini`, `eldermenu-item-notext`	`li`	мини-пункт / пункт без текста
`eldermenu-mobile-modal`, `eldermenu-mobile-offcanvas`, `eldermenu-mobile-fullscreen`	`nav`	выбранный режим мобильного меню
`eldermenu-mobile-accordion`, `eldermenu-mobile-drilldown`	`nav`	тип мобильного подменю

CSS-переменные

Переменная	Где	Назначение
`--eldermenu-accordion-indent`	`nav`	отступ вложенных уровней аккордеона (настройка «Отступ выпадающего аккордеона»)
`--eldermenu-sticky-top`, `--eldermenu-sticky-z`, `--eldermenu-sticky-background`	обёртка липкого меню	отступ сверху, z-index и фон закреплённой панели
`--eldermenu-submenu-indicator-*`	`.eldermenu`	положение и размеры стрелок подменю

Если стиль не применяется

Стили скина начинаются с .eldermenu-skin-… и содержат 2–4 класса. Начинайте свой селектор с .eldermenu и повторяйте структуру — например .eldermenu .eldermenu-item-level-0 > .eldermenu-target: при равной специфичности побеждает ваш код, потому что он выводится позже.
Мобильные правила плагина длиннее (до пяти классов). В поле «мобильные» начинайте с nav.eldermenu.eldermenu-responsive.eldermenu-responsive-default.
Проверить, какое правило побеждает: правый клик по элементу → «Просмотреть код» → вкладка «Стили».
!important — крайняя мера; с ним ваши же будущие правки начнут «не работать».

Все рецепты на странице CSS: готовые рецепты проверены на витрине с включённым скином.

CSS: основы

Куда писать CSS#

Разметка меню#

Как выбрать нужное#

Классы состояний#

CSS-переменные#

Если стиль не применяется#