En WordPress, si quieres ocultar el menú del celular, sigue leyendo este blog
Descubrirá que la mayoría de los temas de WordPress son compatibles con estilos integrados, lo que lo ayudará a convertir automáticamente el menú de navegación en un menú móvil.
En un teléfono móvil, es posible que no desee utilizar un menú similar, ya que es posible que necesite diferentes estilos de menú para mostrarlos en los teléfonos móviles.
A continuación encontrará dos métodos diferentes para hacer ocultar el menú móvil en WordPress, ver a continuación:
Método 1: ocultar el menú móvil con un complemento de WordPress
Para los principiantes, se recomienda el método 1, ya que no tienen que meterse con la codificación, solo use complementos para ocultar el menú móvil que proporciona el tema de WordPress de forma predeterminada.
Cuando están ocultos, pueden usar varios menús o no mostrar ningún menú en dispositivos móviles.
Para usar un complemento de WordPress, un principiante primero debe iniciar sesión en el panel de control de WordPress, luego hacer clic en la apariencia y luego en la página del menú. Aquí pueden crear un nuevo menú de navegación para exhibir en sus dispositivos móviles.
Ahora encontrará otra pantalla donde tiene un nuevo nombre de menú para que pueda reconocerlo si es necesario. Tenga en cuenta que ha agregado el nombre como «menú de teléfono». Ahora puedes elegir el artículo.
Ahora que ha agregado elementos a su menú, es hora de hacer clic en el botón Guardar menú.
Ahora desde el repositorio de plugins de WordPress puedes elegir Menú móvil de WP – y descargarlo. También puede instalar este complemento directamente desde su panel de WordPress.
Después de la activación, deberá ir a la página de menú de su dispositivo móvil para configurar los ajustes del complemento.
Ahora encontrará una opción aquí para que el menú del teléfono esté en el lado izquierdo o derecho. Puede activar o desactivar la opción b.
Ahora seleccione el menú del teléfono que creamos anteriormente en el menú desplegable.
Ahora desplácese hacia abajo en la página hasta que vea la opción «ocultar el menú del tema original». Ahora, esta opción lo ayudará a decirle al complemento que el menú móvil del tema de WordPress debe estar oculto.
De forma predeterminada, los complementos utilizarán los identificadores más utilizados por los temas de WordPress compatibles con dispositivos móviles. La mayoría de los usuarios del sitio web no tendrán que hacer nada aquí.
Suponga que el complemento que está utilizando no puede ocultar el menú móvil de sus temas, puede visitar la misma página nuevamente y hacer clic en «buscar elemento» con el mouse para señalar el menú de navegación de su tema.
Para mantener todas sus configuraciones, no olvide guardar sus cambios.
Ahora que configuramos con el complemento, ahora debe decirle a su sitio web que debe mostrar el menú del teléfono que el complemento agrega a la nueva ubicación del menú.
Para hacer esto:
Vaya a Apariencia y haga clic en la página de menú.
Asegúrese de que en el menú desplegable el menú del teléfono creado esté correctamente seleccionado. Ahora seleccione una ubicación debajo del elemento del menú, es decir, Menú móvil derecho o Menú móvil izquierdo.
Ahora compruebe si el nuevo menú está visible en su sitio web o no. Sin embargo, el complemento que usamos no mostrará el menú móvil de su tema, pero mostrará el que creamos, es decir, el menú del teléfono.
El complemento sugerido por nosotros, es decir, WP Mobile Menu Plugin, lo ayudará a cambiar el color de la barra de menú, agregar más íconos, cambiar la opacidad y mucho más en la configuración. Puede utilizar estas opciones de configuración de forma fácil y gratuita.
Método 2: Con un código, oculta el menú móvil
Al elegir este método para ocultar el menú móvil, asegúrese de tener experiencia en codificación o al menos estar familiarizado con CSS personalizado.
Con este método, tendrá dos enfoques diferentes. Puede hacer que todo el menú móvil sea invisible con CSS, o puede hacer que los elementos individuales sean invisibles en los dispositivos móviles.
Haz que tu menú completo sea invisible en dispositivos pequeños con CSS
Los elementos que desea cambiar con el código CSS personalizado deben determinarse. Para hacer esto, primero debe visitar su sitio web y luego hacer clic en el menú de navegación. Ahora haga clic derecho sobre él y seleccione la herramienta de auditoría.
Ahora encontrarás dos pantallas diferentes. Una pantalla mostrará su sitio web, mientras que otra pantalla mostrará el código fuente. Sin embargo, deberá ajustar la pantalla del navegador a un tamaño más pequeño, a menos que el menú de navegación del escritorio no se reemplace con el menú móvil.
Ahora es necesario averiguar el CSS y los ID utilizados por el menú de navegación de su sitio de WordPress. Al mover el mouse sobre el código fuente de su sitio, puede resaltar el área del menú.
- Ahora ve a tu panel de WordPress.
- Haga clic en la mirada
- Vaya a las opciones de personalización de la página para iniciar la personalización del tema.
- Ahora puede volver a la pestaña «CSS adicional» y hacer clic en el icono del teléfono móvil en la esquina derecha del panel de administración.
El módulo de personalización mostrará una vista previa que muestra cómo se ve su sitio web en los teléfonos. Se debe agregar el código CSS mencionado a continuación y el menú móvil en el panel de vista previa desaparecerá.
.navbar-toggle-wrapper {
display:none;
}
Asegúrese de reemplazar .nav-toggle-wrapper con el identificador que usa su tema de WordPress.
En la parte superior, haz clic en el botón «publicar» para guardar todos los cambios.
Establecer menú invisible en el móvil con CSS
Este es el segundo intento de ocultar el menú móvil. En este enfoque, se le pedirá que cree un menú de navegación y luego haga que el menú móvil sea visible o invisible en una computadora de escritorio o dispositivos móviles.
La ventaja de usar este método es que puede usar un menú de navegación similar para ocultar menús en computadoras de escritorio o teléfonos móviles.
- En el panel de WordPress
- ir a la mirada
- Haga clic en la página del menú
- Pulse el botón de opciones de pantalla
- Justo al lado de «Clases CSS», marque la casilla.
Hasta que encuentre el elemento del menú que desea ocultar, desplácese hacia abajo en la página. En la configuración del elemento del menú, encontrará la opción para agregar una clase CSS. Haga clic en él y agregue la clase CSS .hide-mobile.
Para ocultar el menú móvil, repita este proceso.
Sin embargo, incluso puede hacer clic con el mouse en los elementos del menú que desea que sean invisibles en los escritorios. Aquí debe agregar clases de CSS .hide-desktop.
Ahora guarde los cambios haciendo clic en el botón «Guardar menú».
Para ocultar el menú móvil, debe agregar un código CSS personalizado. Esta es la razón por
- ir a la mirada
- Haga clic en la página de personalización
- Comienza la personalización del tema
- Ahora haga clic en la pestaña CSS adicional
- Y agregue el código que se proporciona a continuación en el campo CSS
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
Ahora puedes comprobar en tu web si el menú móvil que estabas ocultando está visible o no. Probablemente el menú del móvil será invisible mientras seguimos las instrucciones para ocultar el menú del móvil.
Solicitud:
Esperamos que los dos métodos diferentes mencionados en este blog lo ayuden a ocultar el menú móvil de manera fácil y efectiva.
