Я оптимизирую меню компании своего сайта для мобильных телефонов и планшетов и настраиваю цвет градиента фона.Цвет, кажется, не относится к подменю, которое остается серым, независимо от того, что я изменяю в своем коде.
Наша компания использует конструктор Divi из Elegant Themes на Wordpress, и я не очень знаком с ним.
Я пытался найти этот сероватый цвет в моем коде, чтобы изменить его на прозрачный, но я не могу его найти.
Я также пытался индивидуально стилизовать элементы подменю, но если я изменю их цвет фона, например на черный, это сработает, но я все равно могу видеть сероватый блок за ним (по краям).
.et_pb_text ul, .et_pb_text ol { margin: 30px; }
/* when mobile menu is open, change hamburger icon to x icon */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: '\4d';
}
/* Changes color of hamburger icon*/
span.mobile_menu_bar:before {
color: #223343 !important;
}
/*Removes blue line below menu bar*/
.et_mobile_menu { border-top: 0px; }
/*Sticks the menu to the top of the page*/
@media only screen and (max-width: 980px) {
.et_fixed_nav #main-header,
.et_fixed_nav #top-header,
.et_non_fixed_nav.et_transparent_nav #main-header,
.et_non_fixed_nav.et_transparent_nav #top-header {
position: fixed;
background-color: white;
}
}
.et_mobile_menu {
overflow: scroll !important;
max-height: 80vh;
}
/* Nests submenu items */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: '\4d';
}
#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
content: '5' ;
}
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
position: relative;
}
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
position: absolute;
background-color: rgba(0,0,0,0.03);
z-index: 1;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
top: 6px;
right: 10px;
cursor: pointer;
text-align: center;
}
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
background-color: rgba(0,0,0,0.1);
}
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 36px;
font-size: 24px;
color: white;
text-transform: none;
speak: none;
content: '\33';
}
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
content: '\32';
}
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
padding-left: 0;
}
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
background-color: rgba(0,0,0,0.03);
}
#main-header #mobile_menu.et_mobile_menu li li {
padding-left: 0;
}
#main-header #mobile_menu.et_mobile_menu li a,
#main-header #mobile_menu.et_mobile_menu li li a,
#main-header #mobile_menu.et_mobile_menu li li li a {
padding-left: 20px;
padding-right: 20px;
}
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a {
padding-right: 20px;
}
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
font-weight: inherit;
}
#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
font-weight: bolder;
}
/*Changes the background color to custom gradient*/
.mobile_nav.closed #mobile_menu,
.mobile_nav.opened #mobile_menu {
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(34,51,67,1) 0%, rgba(62,151,195,1) 28%, rgba(62,151,195,1) 48%, rgba(75,158,137,1) 100%, rgba(41,137,216,1) 100%);
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(34,51,67,1) 0%, rgba(62,151,195,1) 28%, rgba(62,151,195,1) 48%, rgba(75,158,137,1) 100%, rgba(41,137,216,1) 100%);
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(34,51,67,1) 0%, rgba(62,151,195,1) 28%, rgba(62,151,195,1) 48%, rgba(75,158,137,1) 100%, rgba(41,137,216,1) 100%);
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(34,51,67,1) 0%, rgba(62,151,195,1) 28%, rgba(62,151,195,1) 48%, rgba(75,158,137,1) 100%, rgba(41,137,216,1) 100%);
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(34,51,67,1) 0%,rgba(62,151,195,1) 28%,rgba(62,151,195,1) 48%,rgba(75,158,137,1) 100%,rgba(41,137,216,1) 100%);
}
В меню должен быть градиент везде, в том числе когда я открываю подменю.Вместо этого подменю (у меня есть три заголовка меню, которые открывают по одному подменю каждое) обернуты в сероватый блок, от которого я не могу избавиться.
Любая помощь приветствуется.Спасибо
Редактировать
Вот часть HTML для пункта меню, которая вызывает проблему, и скриншот того, как он выглядит.
<a>Features</a>
<ul class="sub-menu">
<li class="ds-custom-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5043 current_page_item menu-item-5739"><a href="https://mywebsite.com/back-office/?customize_changeset_uuid=5733c529-17ca-464a-b7c4-c59f331a9176&customize_autosaved=on&customize_messenger_channel=preview-30" target="_self">Back-Office</a></li>
<li class="ds-custom-link menu-item menu-item-type-post_type menu-item-object-page menu-item-5740"><a href="https://mywebsite.com/mid-office/?customize_changeset_uuid=5733c529-17ca-464a-b7c4-c59f331a9176&customize_autosaved=on&customize_messenger_channel=preview-30" target="_self">Mid-Office</a></li>
</ul>
