В статье приведены  способы изменения внешнего вида меню Divi, которое выводится на мобильных устройствах.  Divi — тема для создания сайтов на WordPress.

1. Фоновое изображение в мобильном меню Divi

С помощью приведенного ниже фрагмента кода CSS можно добавить в мобильное меню фоновое изображение.

Чтобы улучшить контрастность текста и его читаемость в коде добавлено наложение полупрозрачного фона на изображение.

.mobile_nav.closed #mobile_menu, 
.mobile_nav.opened #mobile_menu {
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
 ),url("http://tstdivi.1771.in.ua/wp-content/uploads/2017/02/Butanerka.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Чтобы настроить этот код нужно заменить ссылку на изображение http://tstdivi.1771.in.ua/wp-content/uploads/2017/02/Nabor-svadebnyj-butanerka.jpg ссылкой на ваше изображение.

Если вы хотите изменить цвет наложения, нужно изменить значения цвета rgba в коде. Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

2. «Липкое» мобильное меню

С помощью этого короткого фрагмента кода CSS мобильное меню будет зафиксированно в верхней части страницы.

@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;
}
}
.et_mobile_menu {
    overflow: scroll !important;
    max-height: 80vh;
}

3. Другой логотип для мобильного меню

Иногда может потребоваться использовать другой логотип для мобильного меню  в отличии от логотипа для рабочего стола.  Приведенный ниже код меняет логотип сайта при показе мобильного меню. Только нужно вставить адрес нового изображения логотипа

@media only screen and (max-width: 980px){
#logo {content: url(ВСТАВЬТЕ СЮДА URL НОВОГО ИЗОБРАЖЕНИЯ ЛОГОТИПА);}
}

4. Добавить тень под мобильное меню

Хотите добавить тень под мобильным меню? Ниже приведен код CSS, который добавляет тень под мобильным меню.

@media only screen and (max-width: 980px){
#main-header {
    -webkit-box-shadow: 0 3px 50px rgba(0,0,0,.2);
    -moz-box-shadow: 0 3px 50px rgba(0,0,0,.2);
    box-shadow: 0 3px 50px rgba(0,0,0,.2);
}
}

Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

5. Добавление текста до и после значка гамбургера в меню

Если вы хотите добавить текст до или после значка гамбургера в меню Divi, вам нужно вставить коды CSS, приведенные ниже.

5.1. Текст справа от значка меню.

.mobile_menu_bar:after { 
position: relative !important; 
content: 'MEНЮ'; 
bottom: 9px; 
left: 10%; 
color: #363636;
}

Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

5.2.Текст слева от значка меню.

#et_mobile_nav_menu:before {
    content: 'MEНЮ';
    font-size: 14px;
    position: absolute !important;
    bottom: 29px;
    right: 35px;
    color: #363633;
}

@media (max-width: 980px) {
#et_top_search {
    margin: 0 65px 0 0; /*смещаем значек поиска влево*/
}
}

Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

6.Изменить значок гамбургера на значок «X» при открытии меню

Простой фрагмент кода изменяет значок гамбургера на значок «X», когда меню открыто.

.mobile_nav.opened .mobile_menu_bar:before {
 content: '\4d';
}

Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

7. Меню на всю ширину экрана + Свертывание вложенных пунктов меню

Этот код немного сложнее, чем перечисленные выше, но позволяет добавить две очень интересные функции в мобильное меню:
— Стиль Fullwidth (меню на всю ширину экрана)
— Свертывание вложенных пунктов меню

Свертывание вложенных пунктов — это возможность сгруппировать все элементы в подменю и скрыть их. Развернуть пункты подменю можно с помощью кнопки переключателя. Такая функция позволяет получить более аккуратное и интуитивно понятное меню.

Код надо добавить в 2 этапа.
1 этап: добавьте представленный ниже код CSS на сайт, как описано внизу этой статьи

СSS код здесь

@media screen and (max-width: 980px) {
 .container { 
 width: 100% !important;
 }
 .et_header_style_left .logo_container{
 padding-left: 25px;
 }
 .et_header_style_centered #main-header .mobile_nav {
 background-color: transparent;
 }
 .mobile_nav.closed .select_page {
 display: none;
 }
 .et-fixed-header#main-header {
 background-color: transparent !important;
 }
}
.et_mobile_menu {
 top: 0 !important;
 border-top: 3px solid #283fc0 !important;;
 background-color: #fff !important;
 padding: 20% 0;
}
.et_mobile_menu li a {
 text-align: center;
 font-size: .8em;
 border: 0;
 padding: 15px 0;
 letter-spacing: 1px;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
 color: #283fc0;
}
.mobile_nav ul#mobile_menu li ul li a {
 font-size: .8em !important;
 margin: auto;
 color: #363636 !important;
 padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
 color: #999;
 -webkit-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.mobile_menu_bar:before {
 padding-right: 25px;
 color: #363636 !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d";
 z-index: 99999;
}

/* NESTING MOBILE MENU SETTINGS */
#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;
 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;
}
2 этап — добавьте представленный ниже код JS на сайт.

JS код здесь

<script type="text/javascript">
(function($) {
 function setup_collapsible_submenus() {
 $( "<div class='sub-menu-toggle'></div>" ).insertBefore( "#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a" );
 $( "#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle" ).click(function () {
 $(this).toggleClass("popped");
 });
 }
 $(document).ready(function() {
 setup_collapsible_submenus();
 });
 $(window).load(function() {
 setup_collapsible_submenus();
 });
})(jQuery);
</script>

Код JS можно добавить в поле <head> вкладки Integrations, которую найдете в настройках темы Divi (см. описание ниже).

Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

7.2. Мобильное меню на темном фоне

Если на 1 этапе вставить приведенный ниже код — получим мобильное меню на темном фоне на всю ширину экрана

CSS код здесь - мобильное меню на темном фоне

/* Nesting Menu */
/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#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';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    background-color: rgba(255,255,255, 0.2);
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 35px;
    right: 30px;
    cursor: pointer;
    text-align: center;
    -webkit-box-shadow: 0 2px 14px 0 rgba(0,0,0, .1);
            box-shadow: 0 2px 14px 0 rgba(0,0,0, .1);
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#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;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 20px;
    padding-right: 20px;
}
/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder;
}

/****** Code Style: Menu Full-screen ******/

@media screen and (max-width: 980px) {
  .et_header_style_centered #main-header {
    position: fixed;
  }
  .et_header_style_centered #main-header .mobile_nav {
    background-color: transparent;
  }
  .mobile_nav.closed .select_page {
    display: none;
  }
  .et-fixed-header#main-header {
    background-color: transparent !important;
  }
}
.et_mobile_menu {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 9998;
  overflow: scroll !important;
  background-color: rgba(10, 10, 10, 0.9) !important;
  margin-left: -30px;
  padding: 25% 0;
  height: 100%;
  width: calc( 100% + 60px);
  border-top: none;
}
.et_mobile_menu li a {
  text-align: center;
  font-size: 1.55em;
  border: 0;
  padding: 5% 0;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
  color: #5376F6;
  background-color: rgba(255,255,255, 0.1);
}
.mobile_nav ul#mobile_menu li ul li a {
  font-size: 1.05em !important;
  margin: auto;
  padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
  color: #999;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
  content: '\4d';
  z-index: 9999;
  color: #fff;
}

Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

8. Изменить вид меню для стиля «по центру»

При использовании стиля шапки сайта «по центру» помимо изменения меню для рабочего стола также изменяется макет мобильного меню.

Фото Фоновое изображение в мобильном меню Divi
Добавьте представленный ниже код CSS на сайт вы установите вид мобильного меню «по умолчанию», оставив вид меню для рабочего стола без изменений.

СSS код здесь

/* Make Divi Centered and Centered Inline Logo Header Bars Look Like The Default Header Bar On Mobile */
@media all and (max-width: 980px) {
/* align header container text to left */
    .et_header_style_centered #main-header .container,
    .et_header_style_split #main-header .container {
        text-align: left;
    }
/* set max width for logo container and bring it above the navigation bar to make it clickable */
    .et_header_style_centered header#main-header .logo_container,
    .et_header_style_split header#main-header .logo_container {
        position:relative;
        z-index: 2;
        max-width: 50%;
    }
/* move split header logo to left */
    .et_header_style_split header#main-header .logo_container {
        float: left;
    }
/* prevent the split header logo from shrinking by increasing its max width */
    .et_header_style_split #logo {
        max-width: 100%;
    }
/* adjust top navigation alignment */
    .et_header_style_centered #main-header div#et-top-navigation,
    .et_header_style_split #main-header div#et-top-navigation {
        position: absolute;
    }
/* make "select page bg color transparent" */
    .et_header_style_centered #main-header .mobile_nav,
    .et_header_style_split #main-header .mobile_nav {
         background-color: rgba(0, 0, 0, 0); 
    }
/* remove mobile_nav left and right padding */
    .et_header_style_centered #main-header .mobile_nav,
    .et_header_style_split #main-header .mobile_nav {
         padding: 5px 0px;
    }
/* remove unnecessary top margin */
    .et_header_style_centered #et_mobile_nav_menu,
    .et_header_style_split #et_mobile_nav_menu {
        margin-top: 0px;
    }
/* hide "select page" container */
    .et_header_style_centered #main-header .mobile_nav .select_page,
    .et_header_style_split #main-header .mobile_nav .select_page {
        display: none;
    }
/* adjust vertical and right alignment of the mobile menu bar */
    .et_header_style_centered #main-header .mobile_menu_bar,
    .et_header_style_split #main-header .mobile_menu_bar {
        position: relative;
        right: 0px;
        text-align: right;
    }
/* adjust dropdown menu top offset */
    .et_header_style_centered #main-header .et_mobile_menu,
    .et_header_style_split #main-header .et_mobile_menu {
        top: 63px;
    }
}

Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

9. Изменить фразу «выбрать страницу» для стиля меню «по центру»

При использовании стиля шапки сайта «по центру» в мобильном меню выводится фраза «выбрать страницу»

Фото Фоновое изображение в мобильном меню Divi
Чтобы изменить фразу добавьте приведенный ниже код JS в поле вкладки Integrations в настройках темы Divi (как добавить код JS на сайт смотрите здесь). В коде введите свой текст для фразы.

JS код здесь - заменить строку "выбрать страницу"

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".select_page").text("ВАШ ТЕКСТ ЗДЕСЬ");
});
</script>

Результат работы кода:

Фото Фоновое изображение в мобильном меню Divi

Куда добавлять код CSS

Добавлять код CSS можно либо в файл style.css дочерной темы, либо в окно «Пользовательский CSS» в настройках темы Divi админпанели  WordPress:

Куда добавлять код JS

Код JS из этой статьи можно добавить в поле <head> вкладки Integrations, которую найдете в настройках темы Divi (смотрите скрин экрана) :

Фото Фоновое изображение в мобильном меню Divi

ПРИМЕЧАНИЕ. Будьте внимательны, чтобы не потерять часть кода при копировании и вставке, ибо если у вас нет хотя бы одной скобки, код может работать неправильно.

Заключение

В статье приведены способы изменения внешнего вида мобильного меню Divi с помощью кодов CSS и JS.
В комменатриях ниже оставляйте отзывы, задавайте вопросы,  делитесь опытом.

Удачи.
Александр Коваль

При подготовке записи использовал статью (англ)