Как скрыть мобильное меню в WordPress

Вы желаете скрыть мобильное меню в WordPress?

Большая часть тем WordPress имеют интегрированные стили, которые автоматом конвертируют ваши навигационные меню в мобильное меню. Но вы сможете не применять одно и то же меню на мобильном телефоне либо применять иной стиль меню.

В данной нам статье мы покажем для вас, как просто скрыть мобильное меню в WordPress при помощи плагина либо способа кода.

Скрытие меню WordPress на мобильном устройстве

Способ 1. Скрыть мобильное меню в WordPress при помощи плагина

Этот метод проще и рекомендуется новеньким. Мы будем применять плагин, чтоб скрыть ваше имеющееся мобильное меню, предоставляемое вашей темой WordPress, а потом применять другое меню либо совершенно не применять меню на мобильных устройствах.

Во-1-х, для вас необходимо посетить Наружный вид »Меню страничку и сделайте новое меню навигации, которое вы желаете показывать на мобильных устройствах.

Создайте новое меню для использования на мобильных устройствах

На последующем экране для вас необходимо указать имя для вашего нового меню, которое поможет для вас идентифицировать его позднее. Назовем его «Мобильное меню». Опосля этого вы сможете избрать элементы, которые желаете добавить в свое меню, в левом столбце.

Добавление пунктов меню

Когда вы закончите добавлять элементы в свое меню, не забудьте надавить клавишу «Сохранить меню», чтоб сохранить свое меню.

Если для вас нужна помощь в разработке нового меню навигации, следуйте нашему управлению для начинающих по созданию меню навигации в WordPress.

Дальше для вас нужно установить и активировать плагин WP Mobile Menu. Для получения дополнительной инфы см. Наше пошаговое управление по установке плагина WordPress.

Опосля активации для вас нужно посетить Характеристики мобильного меню страничка для опции характеристик плагина. Отсюда для вас необходимо избрать, желаете ли вы показывать мобильное меню справа либо слева, включив переключатель.

Выберите мобильное меню и его направление

В раскрывающемся меню изберите сделанное ранее мобильное меню.

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

Скрыть мобильное меню темы в WordPress

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

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

Не забудьте надавить клавишу «Сохранить конфигурации», чтоб сохранить свои опции.

Сейчас, когда мы настроили плагин, нам необходимо указать веб-сайту WordPress показывать наше мобильное меню в новеньком месте меню, добавленном плагином.

Просто перейдите в Наружный вид »Меню страничка. Удостоверьтесь, что мобильное меню, которое вы сделали ранее, выбрано в раскрывающемся меню. Под вашим пт меню изберите пространство, которое вы избрали в настройках плагина (к примеру, левое мобильное меню либо правое мобильное меню).

Расположение меню

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

Мобильное меню заменено

Плагин WP Mobile Menu дозволяет изменять цвет строчки меню, изменять прозрачность, добавлять значки и почти все другое в настройках. Не стесняйтесь экспериментировать с этими опциями.

Способ 2. Скрыть мобильное меню при помощи кода CSS.

Этот способ незначительно сложен и просит использования некого настраиваемого CSS.

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

1. Скрытие полного меню на мобильных устройствах при помощи CSS.

Во-1-х, для вас необходимо узнать, какой элемент необходимо поменять, используя свой CSS. Для этого просто перейдите на собственный сайт и наведите указатель мыши на меню навигации. Опосля этого щелкните правой клавишей мыши и изберите инструмент «Проверить».

Осмотрите инструмент

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

Исходный код при просмотре меню рабочего стола

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

Идентификатор мобильного меню

Для вас необходимо узнать идентификатор и класс CSS, применяемые вашим меню навигации WordPress. Вы сможете создать это, наведя указатель мыши на начальный код, пока не будет выделена область меню.

Как видно на снимке экрана выше, в нашей испытательной теме употребляется navbar-toggle-wrapper учебный класс.

Опосля этого необходимо перейти в Наружный вид »Настроить Страничка в админке WordPress для пуска настройщика тем. Тут для вас необходимо переключиться на вкладку «Доп CSS» и щелкнуть значок мобильного устройства в правом нижнем углу левой панели.

Добавление пользовательского CSS, чтобы скрыть полное меню

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

.navbar-toggle-wrapper { 
display:none; 
} 

Не забудьте поменять .navbar-toggle-wrapper идентификатором, применяемым вашей темой WordPress.

Опосля этого нажмите клавишу «Опубликовать» вверху, чтоб сохранить конфигурации.

2. Скрытие определенных пт меню в мобильном меню при помощи CSS.

Этот способ дозволяет для вас сделать меню навигации, а потом выборочно показывать либо скрывать элементы, которые вы не желаете показывать на мобильных либо настольных устройствах.

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

Поначалу для вас необходимо перейти в Наружный вид »Меню страничку и нажмите клавишу Характеристики экрана в правом верхнем углу экрана. Отсюда для вас необходимо установить флаг рядом с параметром «Классы CSS».

Параметры экрана

Опосля того. для вас необходимо прокрутить вниз до пт меню, который вы желаете скрыть на мобильных устройствах, и щелкнуть, чтоб развернуть его. В настройках пт меню сейчас вы увидите возможность добавить класс CSS. Давай и добавь .hide-mobile CSS-класс есть.

Добавить класс CSS

Повторите процесс для всех пт меню, которые вы не желаете показывать на мобильном устройстве.

Буквально так же вы также сможете щелкнуть элементы меню, которые желаете скрыть на настольных компах. Сейчас добавьте .hide-desktop Заместо этого класс CSS.

По окончании не забудьте надавить клавишу «Сохранить меню», чтоб сохранить конфигурации.

Сейчас мы добавим свой CSS, чтоб скрыть эти пункты меню. Просто зайдите в Наружный вид »Настроить страничку, чтоб запустить настройщик тем, и щелкните вкладку Доп CSS.

Для вас нужно добавить последующий код CSS в поле CSS.

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}
Добавьте свой собственный CSS

Не забудьте надавить клавишу «Опубликовать», чтоб сохранить конфигурации.

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

Различные меню на экранах компьютеров и мобильных устройств

Мы возлагаем надежды, что эта статья посодействовала для вас выяснить, как просто скрыть мобильное меню в WordPress.


Поделись с друзьями:

Оставьте комментарий