В статье приведены способы изменения внешнего вида меню 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 в коде. Результат работы кода:
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);
}
}
Результат работы кода:
5. Добавление текста до и после значка гамбургера в меню
Если вы хотите добавить текст до или после значка гамбургера в меню Divi, вам нужно вставить коды CSS, приведенные ниже.
5.1. Текст справа от значка меню.
.mobile_menu_bar:after {
position: relative !important;
content: 'MEНЮ';
bottom: 9px;
left: 10%;
color: #363636;
}Результат работы кода:
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; /*смещаем значек поиска влево*/
}
}
Результат работы кода:
6.Изменить значок гамбургера на значок «X» при открытии меню
Простой фрагмент кода изменяет значок гамбургера на значок «X», когда меню открыто.
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
Результат работы кода:
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;
}
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 (см. описание ниже).
Результат работы кода:
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;
}
Результат работы кода:
8. Изменить вид меню для стиля «по центру»
При использовании стиля шапки сайта «по центру» помимо изменения меню для рабочего стола также изменяется макет мобильного меню.
С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;
}
}
Результат работы кода:
9. Изменить фразу «выбрать страницу» для стиля меню «по центру»
При использовании стиля шапки сайта «по центру» в мобильном меню выводится фраза «выбрать страницу»
JS код здесь - заменить строку "выбрать страницу"
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".select_page").text("ВАШ ТЕКСТ ЗДЕСЬ");
});
</script>
Результат работы кода:
Куда добавлять код CSS
Добавлять код CSS можно либо в файл style.css дочерной темы, либо в окно «Пользовательский CSS» в настройках темы Divi админпанели WordPress:
Куда добавлять код JS
Код JS из этой статьи можно добавить в поле <head> вкладки Integrations, которую найдете в настройках темы Divi (смотрите скрин экрана) :
ПРИМЕЧАНИЕ. Будьте внимательны, чтобы не потерять часть кода при копировании и вставке, ибо если у вас нет хотя бы одной скобки, код может работать неправильно.
Заключение
В статье приведены способы изменения внешнего вида мобильного меню Divi с помощью кодов CSS и JS.
В комменатриях ниже оставляйте отзывы, задавайте вопросы, делитесь опытом.
Удачи.
Александр Коваль
При подготовке записи использовал статью (англ)
Спасибо за статью, очень пригодилась. Только один момент, при использовании вашего способа закрепления мобильного меню появляется проблема с якорными ссылками — шапка занимает часть секции, на которую перешли. На версии для пк такого нет, нужная секция появится ровно под шапкой. Не подскажете, как изменить ваш css, что бы избежать этой проблемы?
Чтобы устраненить смещение из-за фиксированного блока попробуйте, например, такой код
@media only screen and (max-width: 980px) { .single #LINK-A:before { display: block; content: ""; height: 60px; margin: -60px 0 0; } }где вместо #LINK-A — поставьте имя якоря
Подскажите пожалуйста- как изменить высоту меню в мобильной версии? Если, предположим, логотипа нет и хочется сделать меню меньше в высоту??? ОЧень буду благодарен за ответ
Используйте CSS:
9. Иконка: .mobile_menu_bar:before { }
10. Главное меню: .et_mobile_menu .menu-item-has-children > a { }
11. Субменю: .et_mobile_menu li a { }
12. Все мобильное меню: et_mobile_menu { }
Высота всего меню задается в настройках темы: Админка ВП->Внешний вид->Настроить->Хедер и наигация->Первичная строка меню->Высота меню
Или СSS: #main-header { }
в настройках не делается строка меню менее 30 px
Тогда вручную. Смотрите еще и эти CSS:
1. Хедер: #main-header { }
2. Хедер после прокрутки: #main-header.et-fixed-header { }
3. Лого: #Logo { }
4. Навигация: #et-top-navigation { }
5. Пункт меню: #top-menu li a { }
6. Стрелка: #top-menu .menu-item-has-children > a:first-child:after { }
7. Иконка поиска: #et_search_icon:before { }
8. Верхнее меню: #top-header
Обратите внимание на отступы #et-top-navigation для мобильного экрана.
Подскажите пожалуйста- как вывести номер телефона в шапку мобильного меню и сделать его кликабельным с телефона? Все перерыл(((((
Самый простой путь — добавьте меню второго уровня (верхнее меню) и добавьте туда номер телефона.
1) Добавьте меню второго уровня: создайте новое меню и укажите что это меню есть меню второго уровня («Внешний вид» -> «Меню» -> «Настройки меню»).
2) Добавьте номер телефона: «Внешний вид» -> «Настроить» -> «Header и навигация» -> «Элементы хедер» -> «Номер телефона». Введите туда номер т/ф, но не цифрами а ссылкой, типа так:
При выборе ссылки браузер попытается набрать т/ф. Если запишете ссылку так
— то при выборе ссылки браузер попытается запустить вайбер.
Да я так пробовал. А как его скрыть на десктопе потом?
Как вариант- CSS. Добавьте к ссылке класс (<a class=»mob»… ) и отключайте элемент для экрана:
@media (min-width: 981px) { a.mob {display:none;} }Или я не понял вас — если вы пробовали то в чем тогда проблема?
Проблема в том что надо чтобы кликабельный телефон был только на мобильной версии. Тоесть надо потом убрать это меню с десктопа, если применить {display:none;} }
к меню второго уровня, то на десктопе образуется пространство между верхом страницы и меню первого уровня.
я воспользовался вашим кодом «текст слева от меню» получилось вставить номер телефона но сделать его кликабельным никак(((
Блин победил….
@media (min-width: 981px) { #top-header {display:none;} }
Добрый день! Спасибо за статью! Вопрос по 7 пункту: как сделать так, чтобы ссылки в верхнем уровне меню были не кликабельны? То есть, чтобы при нажатии на пункт меню, разворачивались подменю? Благодарю!
Здравствуйте! Чтобы убрать кликабельность пункта меню: выбериет тип пункта «произвольные ссылки», разместите эту позицию в меню, назовите как надо, потом удалите URL в пункте меню. Пункт меню останется — но по ссылке перехода не будет в виду отсутствия таковой. См скрин:
Привет. Есть идеи как в развернувшееся меню после самого меню добавить контент? В моём случае хочу туда добавить мой сети, емэил. В общем, мобильную шапку разгрузить и часть в меню после самого меню перенести.
И попутно вопрос. Как сделать промо-бар (типа как на официальном сайте диви), чтоб закрыть его по крестику и потом не появлялось. Копаю в сторону удаления DOM элемента через js, но пока что ничего подходящего не нашёл. Если есть примеры на этот счёт, буду рад ознакомиться.
Здравия. По добавлению контента: пока только идея «править код» (header.php или theme-header.php) в дочерной теме. По промо-бару: инструкция как это сделать приведена здесь: How to Create a Promo/Notification Bar in Divi
Доброго дня, Вы случайно не знаете- почему может быть такое: в мобильной версии при клике на любую ссылку второго уровня, которая ведет на якорь на данной странице, после прокрутки к нужному месту, мобильное меню не закрывается, причем во всех случаях когда кликаешь на меню второго уровня. Со ссылками первого — все как положено, при прокрутке к нужному месту — мобильное меню закрывается как положено.
Александр, спасибо за информацию!!! Пару советов пригодилось, хотя до вашей статьи об это не задумывался 🙂
Здравствуйте, у меня не работает походу js неправильный
Здравия, спасибо за найденную ошибку. Исправил.