Как скрыть мобильное меню в WordPress (шаг за шагом)

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

Вы обнаружите, что большинство тем WordPress имеют встроенные стили, которые помогут вам автоматически преобразовать меню навигации в мобильное меню.

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

Ниже вы найдете два разных способа скрыть мобильное меню в WordPress:

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

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

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

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

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

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

Теперь из репозитория плагинов WordPress вы можете выбрать мобильное меню WP и загрузить его. Или вы можете установить этот плагин прямо с панели управления WordPress.

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

Теперь выберите меню телефона, которое мы создали ранее, из выпадающего меню.

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

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

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

Для сохранения всех ваших настроек не забудьте сохранить изменения.

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

Сделать это:

Перейдите к внешнему виду и нажмите на страницу меню.

Убедитесь, что в раскрывающемся меню созданное меню телефона выбрано правильно. Теперь выберите место под пунктом меню, т.е. правое мобильное меню или левое мобильное меню.

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

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

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

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

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

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

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

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

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

• Теперь перейдите в панель управления WordPress.
• Нажмите на внешний вид
• Перейдите к опции страницы настройки, чтобы запустить настройщик темы.
• Теперь вы можете вернуться на вкладку «Дополнительные CSS» и в правом углу панели администратора щелкнуть значок мобильного телефона.

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

.navbar-toggle-wrapper { 
дисплей:нет; 
}

Убедитесь, что вы заменили .nav-toggle-wrapper идентификатором, который использует ваша тема WordPress.
Вверху нажмите кнопку «Опубликовать», чтобы сохранить все изменения.

Сделайте определенное меню невидимым на вашем мобильном телефоне с помощью CSS

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

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

• В панели управления WordPress
• Перейти к внешнему виду
• Нажмите на страницу меню
• Нажмите кнопку выбора экрана
• Просто рядом с параметрами «Класс CSS» установите флажок.

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

Чтобы скрыть мобильное меню, повторите этот процесс.

Однако вы даже можете щелкнуть мышью по элементам меню, которые хотите сделать невидимыми на настольных компьютерах. Здесь вам нужно будет добавить классы CSS .hide-desktop.

Теперь сохраните изменения, нажав кнопку «Сохранить меню».

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

• Перейти к внешнему виду
• Нажмите на страницу настройщика
• Настройщик темы будет запущен
• Теперь нажмите на дополнительную вкладку CSS
• И добавьте приведенный ниже код в поле CSS.

@media (минимальная ширина: 980 пикселей){
    .hide-рабочий стол {
    отображение: нет !важно;
    }
}
    @media (максимальная ширина: 980 пикселей){
    .hide-мобильный{
    отображение: нет !важно;
    }
}

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

Вывод:
Мы надеемся, что два разных метода, упомянутых в этом блоге, помогут вам легко и эффективно скрыть мобильное меню.