Как изменить цвет фона пункта подменю главного меню при наведении курсора?
Например, необходимо изменить цвет фона пункта подменю при наведении курсора:
Для этого нужно прописать соответствующие стили.
Шаг 1. Перейти в Администрирование > Контент > Структура сайта > Файлы и папки.
Шаг 2. Найти папку /bitrix/templates/simai.framework.
Шаг 3. Открыть в режиме редактирования PHP-кода файл template_styles.css.
Шаг 4. Прописать в конце файла код.
Где #код_цвета_фона заменить на код необходимого цвета фона, а #код_цвета_текста заменить на код необходимого цвета текста. И сохранить изменения. Если после сохранения изменений не видно в публичной части сайта, нужно сбросить кеш.
Перед внесением изменений, обратите внимание, какая на данный момент выбрана тема главного меню, тема подменю, а также вид подменю в настройках сайта на вашем сайте.
Вариант 1. Для выпадающего горизонтального подменю
Вариант 1.1. Если тема главного меню - светлая, и тема подменю главного меню - светлая
Вариант 1.2. Если тема главного меню - светлая, и тема подменю главного меню - тёмная
Вариант 1.3. Если тема главного меню - тёмная, и тема подменю главного меню - светлая
Вариант 1.4. Если тема главного меню - тёмная, и тема подменю главного меню - тёмная
Вариант 1.1. Тема главного меню - светлая, тема подменю главного меню - светлая
.horizontal-submenu.navigation-container.theme-light div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-light ul.submenu-items li.nav-item:hover{
background-color: #код_цвета_фона;
color: #код_цвета_текста;
}
Например:
.horizontal-submenu.navigation-container.theme-light div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-light ul.submenu-items li.nav-item:hover{
background-color: #ff9900;
color: #4b0e70;
}
Вариант 1.2. Тема главного меню - светлая, тема подменю главного меню - тёмная
.horizontal-submenu.navigation-container.theme-light div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-dark ul.submenu-items li.nav-item:hover{
background-color: #код_цвета_фона;
color: #код_цвета_текста;
}
Например:
.horizontal-submenu.navigation-container.theme-light div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-dark ul.submenu-items li.nav-item:hover{
background-color: #ff9900;
color: #4b0e70;
}
Вариант 1.3. Тема главного меню - тёмная, тема подменю главного меню - светлая
.horizontal-submenu.navigation-container.theme-dark div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-light ul.submenu-items li.nav-item:hover{
background-color: #код_цвета_фона;
color: #код_цвета_текста;
}
Например:
.horizontal-submenu.navigation-container.theme-dark div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-light ul.submenu-items li.nav-item:hover{
background-color: #ff9900;
color: #4b0e70;
}
Вариант 1.4. Тема главного меню - тёмная, тема подменю главного меню - тёмная
.horizontal-submenu.navigation-container.theme-dark div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-dark ul.submenu-items li.nav-item:hover{
background-color: #код_цвета_фона;
color: #код_цвета_текста;
}
Например:
.horizontal-submenu.navigation-container.theme-dark div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-dark ul.submenu-items li.nav-item:hover{
background-color: #ff9900;
color: #4b0e70;
}
Вариант 2. Для выпадающего вертикального подменю
Вариант 2.1. Если тема главного меню - светлая, и тема подменю главного меню - светлая
Вариант 2.2. Если тема главного меню - светлая, и тема подменю главного меню - тёмная
Вариант 2.3. Если тема главного меню - тёмная, и тема подменю главного меню - светлая
Вариант 2.4. Если тема главного меню - тёмная, и тема подменю главного меню - тёмная
Вариант 2.1. Тема главного меню - светлая, тема подменю главного меню - светлая
.vertical-submenu.navigation-container.theme-light div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-light ul.submenu-items li.nav-item:hover{
background-color: #код_цвета_фона;
color: #код_цвета_текста;
}
Например:
.vertical-submenu.navigation-container.theme-light div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-light ul.submenu-items li.nav-item:hover{
background-color: #ff9900;
color: #4b0e70;
}
Вариант 2.2. Тема главного меню - светлая, тема подменю главного меню - тёмная
.vertical-submenu.navigation-container.theme-light div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-dark ul.submenu-items li.nav-item:hover{
background-color: #код_цвета_фона;
color: #код_цвета_текста;
}
Например:
.vertical-submenu.navigation-container.theme-light div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-dark ul.submenu-items li.nav-item:hover{
background-color: #ff9900;
color: #4b0e70;
}
Вариант 2.3. Тема главного меню - тёмная, тема подменю главного меню - светлая
.vertical-submenu.navigation-container.theme-dark div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-light ul.submenu-items li.nav-item:hover{
background-color: #код_цвета_фона;
color: #код_цвета_текста;
}
Например:
.vertical-submenu.navigation-container.theme-dark div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-light ul.submenu-items li.nav-item:hover{
background-color: #ff9900;
color: #4b0e70;
}
Вариант 2.4. Тема главного меню - тёмная, тема подменю главного меню - тёмная
.vertical-submenu.navigation-container.theme-dark div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-dark ul.submenu-items li.nav-item:hover{
background-color: #код_цвета_фона;
color: #код_цвета_текста;
}
Например:
.vertical-submenu.navigation-container.theme-dark div.nav-container nav.sf-nav section.center-section ul.nav-items li.nav-item div.nav-submenu.theme-dark ul.submenu-items li.nav-item:hover{
background-color: #ff9900;
color: #4b0e70;
}
Например:
Результат:
