Вопрос или проблема
У меня возникла проблема, когда мое подменю скрыто за содержимым страницы, которая говорит
“Качественные светодиоды без ущерба для бюджета
Наши качественные светодиоды обеспечивают превосходное освещение, сохраняя ваши деньги на энергорасходах.”
“КУПИТЬ СЕЙЧАС!”
Проблема с подменю заключается в том, что оно содержит наши категории продуктов “Светодиоды, Троферы, Трубки и т.д.”
Я пробовал применить несколько различных CSS кодов, и ничего не помогает.
Это относительно простая проблема CSS. Я только что проверил вашу HTML-разметку и нашел родительский контейнер для навигации. Затем я добавил, в инструментах разработчика, следующий CSS:
.fusion-tb-header .fusion-fullwidth{
position: relative;
z-index: 100;
}
Это по сути перемещает родительский контейнер навигации так, чтобы он находился выше (по оси Z) другого содержимого. Иногда вам нужно указать position, если это не указано в других местах, чтобы z-index обрабатывался. Я не знаю, почему таковы спецификации, просто это так.
Вот HTML, где было внесено это изменение:
<div class="fusion-fullwidth fullwidth-box fusion-builder-row-3 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling fusion-custom-z-index" style="--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-z-index:1;--awb-background-color:var(--awb-color1);--awb-flex-wrap:wrap;--awb-box-shadow:0px 10px 16px -12px hsla(var(--awb-color8-h),var(--awb-color8-s),var(--awb-color8-l),calc(var(--awb-color8-a) - 90%));"><div class="fusion-builder-row fusion-row fusion-flex-align-items-stretch fusion-flex-content-wrap" style="width:104% !important;max-width:104% !important;margin-left: calc(-4% / 2 );margin-right: calc(-4% / 2 );">
Теперь, поскольку это коммерческая тема третьей стороны, я предполагаю, что в редакторе, где вы настраиваете заголовок, должны быть опции, где вы можете и, возможно, должны настроить это. Я основываю это предложение на большом количестве встроенных стилей, которые были внедрены в элемент.
Если вы добавляете CSS, я предполагаю, что в Avada или в WP Customizer есть что-то вроде ‘Пользовательский CSS’ или ‘Расширенные параметры – Пользовательский CSS’. Но не спрашивайте меня, где это добавить, я не использую Avada и совершенно не знаком с этим.
Хорошей практикой является соблюдение одной методологии применения стилей. Поэтому, если вы исследуете все настройки и переходите по страницам, переключая параметры, продолжайте это делать. Если вы добавляете CSS в таблицу стилей дочерней темы, продолжайте это делать. Если вы добавляете CSS в инструмент темы для пользовательского CSS, то продолжайте это делать. Мало что так раздражает, как копаться на сайте, пытаясь выяснить где кто-то внес изменения и обнаружить, что все возможные варианты были использованы без всякого порядка.
Примечание: Правило CSS, которое я предоставил, может повлиять на другие области, где вы этого не хотите, поэтому если возможно, добавьте идентификатор к <div>, который содержит навигацию, и примените стили к этому идентификатору, а не к тем классам, которые, по всей видимости, могут быть повторно использованы.
Я столкнулся с той же проблемой. Как сказал Тони, это связано с z-index. В интерфейсе Avada выберите контейнер, который включает ваше меню. Перейдите в параметры контейнера > Дизайн. Прокрутите вниз и добавьте значение в поле z-index.
Ответ или решение
Проблема отображения выпадающего подменю в Avada: подробное руководство
Ваши проблемы с отображением выпадающего подменю в теме Avada связаны с параметрами z-index и свойствами позиционирования CSS. Давайте шаг за шагом разберем, как решить эту распространенную проблему, чтобы ваше подменю отображалось поверх контента страницы, а не за ним.
I. Введение в проблему
При использовании темы Avada многие пользователи сталкиваются с проблемой, когда выпадающее подменю скрыто за контентом страницы. Это может произойти, если уровень z-index для контейнера меню ниже, чем у других элементов на странице. В вашем случае проблема касается категорий товаров, и вы хотите, чтобы они отображались явно.
II. Понимание свойств CSS
Для того чтобы подменю находилось выше других элементов на странице, его контейнер должен иметь более высокий z-index. Чтобы z-index работал корректно, необходимо также указать position для родительского элемента, поскольку по умолчанию z-index не применим к элементам с position: static.
III. Решение проблемы с помощью CSS
1. Определение нужного контейнера
Начните с нахождения верхнего родительского контейнера для навигации. В вашем случае это, скорее всего, элемент с классом .fusion-fullwidth или другим подобным классом.
2. Введение стилей с помощью CSS
Добавьте следующий CSS-код, который переместит контейнер навигации выше других элементов на странице:
.fusion-tb-header .fusion-fullwidth {
position: relative; /* Убедитесь, что позиционирование установлено */
z-index: 100; /* Устанавливаем высокий z-index */
}3. Использование инструментов разработчика
Перед внесением изменений в код, рекомендуется использовать инструменты разработчика в браузере (например, Google Chrome), чтобы протестировать изменения. Вы можете временно вставить этот CSS в инспекторе элемента, чтобы убедиться в его эффективности.
IV. Настройки Avada
Если у вас есть доступ к редактору Avada:
- Выбор контейнера меню: Найдите контейнер, который содержит ваше меню.
- Настройка опций контейнера: Перейдите в настройки контейнера, затем в раздел
Design(Дизайн). - Добавление значения для z-index: Найдите поле для
z-indexи задайте значения, как показано выше или выше 100.
V. Рекомендации по управлению стилями
Чтобы избежать путаницы в будущих изменениях:
- Используйте одну методику добавления стилей. Либо используйте настройки темы, либо добавляйте их в файл стилей дочерней темы.
- Убедитесь, что ваши изменения легко отслеживаются, добавляя комментарии или новости об изменениях.
- Рассмотрите возможность назначения уникального ID для вашего контейнера, чтобы избежать влияния на другие элементы, использующие схожие классы.
VI. Заключение
Надеемся, это руководство поможет вам успешно справиться с проблемой скрытого выпадающего подменю в Avada. Применяя вышеприведенные кодовые изменения и следуя рекомендациям по управлению стилями, вы сможете улучшить видимость и пользовательский опыт на вашем сайте.
Если у вас остались вопросы, не стесняйтесь обращаться за дополнительной помощью!