Скрыть категорию товаров из меню Есть решение
Добрый день! Подскажите пожалуйста, возможно ли как-то скрывать меню второго уровня в определенных пунктах меню?
Добавить ответ
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Если вы хотите для каждого элемента меню прописывать свой код, то вот инструкции (но помните, что код нужно переписывать, при каждом изменении порядка меню):
Всё нужно прописывать в блок flatty.user_style
КОД:
/* Скрыть всплывающее меню ВТОРОГО ЭЛЕМЕНТА МЕНЮ data-count начинается с нуля, поэтому учитывайте это смещение */ @media only screen and (min-width: 1024px) { .nav.navbar-nav.onlyCatsWide li[data-count="1"]:hover a:before, .nav.navbar-nav.onlyCatsWide li[data-count="1"]:hover a:after, .nav.navbar-nav.onlyCatsWide li[data-count="1"]:hover > ul { display:none !important; } }Но на тач устройствах (ширина начинается с 1024 (ipad в ландшафтной ориентации)) его нужно всё равно показать, т.к. родительская категория не "кликабельная"
Поэтому оборачиваем код в media query
В настройках необходимых категорий отметьте галочку Скрытая категория.
Нет Владимир, Вы меня не верно поняли. Мне нужно отображение категории. Но что бы в меню она не отображалась.
Это единственный способ скрыть категорию из меню. =(
Владимир, прошу прощения за назойливость :) Посмотрите пожалуйста, средствами css не получится решить мою проблему?
С помощью средств CSS можно обратится к любому элементу по его порядковому номеру в списке
например Вы хотите изменить отображение дочерних элементов 2-го пункта меню
это обратившись к "селекторам"
ul.base-menu.tree > li:nth-child(2)
* Элемент li второй в списке (в Вашем случае это пункт меню "обои по бренду")
ul.base-menu.tree > li:nth-child(2)>a
* дочерний элемент второго пункта - ссылка
ul.base-menu.tree > li:nth-child(2)>ul
* дочерний элемент второго пункта - блок содержащий пункты 2-го уровня
ul.base-menu.tree > li:nth-child(2)>ul>li
* пункты 2-го уровня вложенности
ul.base-menu.tree > li:nth-child(2)>ul>li>ul
* контейнер для пунктов 3-го уровня вложенности
что бы изменить отображение контейнера и его содержания для 2-го пункта меню пропишите в пользовательских стилях следующее
@media only screen and (min-width: 993px){
ul.base-menu.tree{
position:relative;
/*изменяем позиционирование контейнера горизонтальных пунктов меню*/
}
ul.base-menu.tree > li:nth-child(2){
position:static;
/*изменяем позиционирование 2-го пункта меню, что бы вложенный блок с пунктами 2-го уровня не наследовал ширину*/
}
ul.base-menu.tree > li:nth-child(2)>ul{
width:100%;
/*задаем ширину контейнеру для пунктов 2-го уровня в 100%*/
}
ul.base-menu.tree > li:nth-child(2)>ul>li{
width:25%;
/*ширину каждого пункта в 25% что бы получилось 4 колонки*/
display:inline-block;
/*изменяем тип отображения - что бы пункты разместились друг рядом с другом по горизонтали*/
}
ul.base-menu.tree > li:nth-child(2)>ul>li>ul{
display:none;
/*скрываем контейнер с элементами 3-го уровня*/
}
}
* таких условий (псевдо-класс) может содержаться несколько в сеекторе
например на скриншоте видно что есть дочерняя категория "Atlas" которая является 3-й по порядку. К ней можно обратится с помощью следующего селектора
ul.base-menu.tree > li:nth-child(2)>ul>li:nth-child(3)>a{
color:red;
}
тут я изменял в старом шаблоне вид дочерних подкатегорий. Не подойдет данный способ для шаблона "Формула успеха"?
О! Владимир, то что нужно! Только как скрыть подкатегории второго уровня?
@media only screen and (min-width: 1024px) { .nav.navbar-nav.onlyCatsWide li[data-count="1"] > ul a:before, .nav.navbar-nav.onlyCatsWide li[data-count="1"] > ul a:after, .nav.navbar-nav.onlyCatsWide li[data-count="1"] > ul > li > ul.dropdown-menu { display:none !important; } }