6 способов улучшить мобильное меню Divi

С появлением Theme Builder  создать мобильное меню Divi для сайта стало намного проще. Однако с помощью нескольких простых приемов CSS вы можете сделать своё гамбургер-меню еще лучше.

1. Добавим текст слева от значка гамбургера.

Три полоски, составляющие так называемое гамбургер-меню, существуют уже давно и к ним привыкли. Однако, вполне уместно будет пояснить посетителям вашего сайта, что этот значок содержит свернутое меню  и его можно раскрыть.
Обратите внимание, что значок гамбургера должен быть выровнен по правому краю, чтобы текст отображался правильно.

Итак, пошагово:

 Войдите в  админпанель WordPress и перейдите вDivi > Theme Options > Вкладка General > Custom CSS.

1. Вставьте следующий код CSS:

   /* Текст слева от иконки-гамбургера */.et_mobile_nav_menu:before {
   content: 'МЕНЮ';
   position: absolute;
   right: 40px;
   }
   

2. Вы можете изменить слово «МЕНЮ» на любое другое, но пусть оно будет коротким и понятным для посетителей.
3. Увеличьте или уменьшите значение right: 40px, чтобы отрегулировать расстояние между «МЕНЮ» и значком гамбургера.
4. Сохраните.

2. Заменим иконку-гамбургер на X при открытии.

То, что значок гамбургера с его тремя линиями превращается в X при раскрытии мобильного меню, является стандартным для большинства тем и приложений WordPress. Но, как ни странно, только не для Divi. К счастью, требуется всего пара строк CSS, чтобы исправить это и улучшить юзабилити вашего сайта.

1. Войдите в  админпанель WordPress и перейдите в Divi > Theme Options > Вкладка General > Custom CSS.
   Вставьте следующий код CSS:

   /* Значок X при раскрытом мобильном меню */.mobile_nav.opened .mobile_menu_bar:before {
   content: "\4d";
   color: #000;
   }

2. Чтобы изменить цвет значка, поменяйте # 000 (черный)  на цвет по вашему выбору.
3. Сохраните.

3. Удалим верхнюю границу мобильного меню.

Голубая линия в верхней части раскрытого мобильного меню нравиться не всем. Если вы хотите избавиться от неё, то вот решение.

1. Войдите в  админпанель WordPress и перейдите в Divi > Theme Options > Вкладка General > Custom CSS.
   Вставьте следующий код CSS:

    

   /* Удаление верхней границы в мобильном меню*/.et_mobile_menu {
   border-top:0px;
   }

2. Сохраните.

Если вы создаете свое меню в Divi Theme Builder, существует и другой способ убрать верхнюю границу.

1. Откройте конструктор тем
2. Откройте свой шаблон заголовка
3. Щелкните шестеренку, чтобы отредактировать модуль меню
4. Перейдите на вкладку Дизайн > Раскрывающееся меню и измените Цвет строки выпадающего меню на rgba (0,0,0,0).
5. Сохранить.

  Это придаст линии свойство transparent (прозрачная) и сделает ее невидимой.

4. Выравниваем по центру ссылки мобильного меню.

Короткие строки меню выглядят лучше, если на мобильных устройствах они выровнены по центру. Стандартными настройками Divi такую центровку сделать нельзя. Как обычно, дело решает пара строк CSS.
Итак, по шагам

1. Войдите в  админпанель WordPress и перейдите в Divi > Theme Options > Вкладка General > Custom CSS.
   Вставьте следующий код CSS:

   /* Выравниваем по центру строки мобильного меню */
   .et_mobile_menu li {
   text-align:center ;
   }
     
   .et_mobile_menu li li, .et_mobile_menu li ul {
   padding-left:0px ;
   }

2. Сохраняем.

5. Делаем мобильное меню полноширинным.

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

1. Войдите в  админпанель WordPress и перейдите в Divi > Theme Options > Вкладка General > Custom CSS.
   Вставьте следующий код CSS: 

   /* Мобильное меню на всю ширину экрана */
   .et_mobile_menu {
   min-width: 100vw;
   margin-left: -10vw;
   }

2. Сохраняем.

5. Делаем мобильное меню полноэкранным.

Если в предыдущем пункте мы сделали полноширинное мобильное меню, следующим логичным шагом будет превратить его в полноэкранное. То есть заполнить всю высоту мобильного экрана. Добавим также небольшой отступ в 50 пикселей cверху для лучшей читаемости.

1. Войдите в  админпанель WordPress и перейдите в Divi > Theme Options > Вкладка General > Custom CSS.
   Вставьте следующий код CSS:

   /* Мобильное меню полной высоты */
   .et_mobile_menu {
   min-height:100vh ;
   min-height: -webkit-fill-available;
   padding-top:50px ;
   }
   
   html {
   height: -webkit-fill-available;
   }

2. Сохраняем.

7. Все CSS-сниппеты в одном месте.

Здесь все шесть фрагментов кода CSS собраны в один.

/* Текст слева от иконки-гамбургера */

.et_mobile_nav_menu:before  {
content: 'МЕНЮ';
position: absolute;
right: 40px;
}

/* Значок X при раскрытом мобильном меню */.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
color: #000;
}

/* Удаление верхней границы в мобильном меню*/.et_mobile_menu {
border-top:0px;
}

/* Выравниваем по центру строки мобильного меню */
.et_mobile_menu li {
text-align:center ;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px ;
}

/* Мобильное меню на всю ширину экрана */.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Мобильное меню полной высоты */.et_mobile_menu {
min-height:100vh ;
min-height: -webkit-fill-available;
padding-top:50px ;
}

html {
height: -webkit-fill-available;
}

Не забываем сохранить.

На этом все, надеюсь пост был полезным!

Так же вам может быть интересной статья Как добавить вторую строку к пунктам меню