Когда откроется мое мобильное меню, мне бы хотелось, чтобы остальная часть видимого фона (кроме самого меню) была тусклой. (Мои страницы и фон меню в целом очень белые).
Существует плагин, который предлагает эту функцию, но, пытаясь сохранить свет на сайте, я пытаюсь понять, возможно ли это с помощью всего лишь нескольких строк code?
Долгое время гуглил не придумал ничего, кроме приложения, которое удивляет ... может быть, я искал не те ключевые слова?
Есть идеи?
Вот мой полный код (не мой оригинальный код, может связать различные части с их соответствующими авторами).
/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
color:#D7AF39;
}
/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
background-color:#FFFFFF;
}
/** Divi Space slide in mobile edits**/
#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }
.mobile_nav.closed #mobile_menu {
transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out !important; }
.mobile_nav.opened #mobile_menu {
transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out; }
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d"; color: #D7AF39; }
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight: 600;
font-family: open sans;
font-size: large;
}
@media(max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }
#main-header .container.clearfix.et_menu_container { width: 100%; }
.logo_container { padding-left: 30px; }
#et-top-navigation { padding-right: 30px; }
}
@media(min-width: 341px) {
#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}