Cómo ocultar un menú móvil en WordPress (paso a paso)

En WordPress, si está buscando ocultar menús de dispositivos móviles, siga leyendo este blog

Descubrirá que la mayoría de los temas de WordPress funcionan con estilos incorporados, lo que lo ayudará a convertir el menú de navegación en un menú móvil automáticamente.

En su teléfono móvil, es posible que no quiera usar un menú similar porque podría estar buscando algunos estilos de menú diferentes para que se muestren en sus teléfonos móviles.

A continuación, encontrará dos métodos diferentes para ocultar un menú móvil en WordPress:

Método 1: ocultar menús móviles con el complemento de WordPress

Para principiantes, se recomienda el método 1, ya que no necesitan meterse con la codificación, solo necesitan hacer uso de complementos para ocultar el menú móvil que está predeterminado en el tema de WordPress.

Después de ocultar esto, pueden usar varios menús o elegir no mostrar ningún menú en los dispositivos móviles.

Para usar el complemento de WordPress, el principiante primero debe iniciar sesión en el panel de control de WordPress y luego hacer clic en apariencia y luego en la página del menú. Aquí pueden crear un nuevo menú de navegación para mostrarlo en dispositivos portátiles.

Ahora encontrará otra pantalla donde tiene un nuevo nombre de menú para que pueda reconocerlo cuando sea necesario. Considere que ha agregado el nombre como 'menú de teléfono'. Ahora puedes elegir el artículo.

Una vez que haya agregado los elementos al menú, ahora es el momento de hacer clic en el botón Guardar menú.

Ahora, desde el repositorio de complementos de WordPress, puede elegir un menú móvil de WP y descargarlo. O puede instalar este complemento directamente desde su panel de WordPress.

Deberá ir a la página del menú móvil después de la activación para configurar los ajustes del complemento.
Ahora aquí, encontrará una opción para hacer que el menú de su teléfono esté a la izquierda o a la derecha. Puede activar o desactivar la opción b.

Ahora seleccione el menú del teléfono que hemos creado anteriormente en el menú desplegable.

Ahora, desplace la página hacia abajo hasta que obtenga una opción para '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 ocultarse.

De forma predeterminada, los complementos utilizarán los elementos más utilizados que identifican a los temas de WordPress compatibles con dispositivos móviles. La mayoría de los usuarios del sitio web no necesitarán hacer nada aquí.

Supongamos que el complemento que está utilizando no puede ocultar un menú móvil de sus temas, luego puede visitar la misma página nuevamente y hacer clic con el mouse en 'buscar elemento' para apuntar al menú de navegación de su tema.

Para almacenar todas sus configuraciones, no olvide guardar los cambios.

Ahora que hemos configurado el uso del complemento, ahora necesita decirle a su sitio web que necesita mostrar el menú del teléfono que el complemento agrega a una nueva ubicación de menú.

Para hacer esto:

Vaya a la apariencia y haga clic en la página del menú.

Asegúrese de que en el menú desplegable, el menú del teléfono que creó esté seleccionado correctamente. Ahora seleccione la 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 estábamos usando no mostrará el menú móvil de su tema, pero mostrará el que creamos, es decir, el menú del teléfono.

El complemento que sugerimos, es decir, el complemento de menú móvil de WP, lo ayudará a cambiar el color de la barra de menú, agregar más íconos, cambiar la opacidad y muchas más cosas en la configuración. Puede usar fácil y libremente tales opciones de configuración.

Método 2: con la ayuda del código, oculta el menú móvil

Al elegir este método para ocultar un menú móvil, asegúrese de tener experiencia en codificación o al menos conocer algunos CSS personalizados.

Para este método, tendrá dos enfoques diferentes. Puede hacer que el menú móvil completo sea invisible con la ayuda de 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 la ayuda del código CSS personalizado deben determinarse. Para realizar esto, primero deberá visitar su sitio web y luego hacer clic en el menú de navegación. Ahora haga clic derecho sobre él y elija una herramienta de inspección.

Ahora encontrarás las dos pantallas diferentes. Una pantalla mostrará su sitio web, mientras que otra pantalla mostrará el código fuente. Sin embargo, debe ajustar la pantalla del navegador a un tamaño más pequeño a menos que el menú de navegación de su escritorio no se reemplace con el menú móvil.

Ahora el CSS y los identificadores utilizados por el menú de navegación de su sitio web de WordPress deben averiguarlo. Al mover el mouse sobre el código fuente de su sitio web, puede resaltar el área del menú.

• Ahora ve al panel de WordPress.
• Haga clic en apariencia
• Vaya a la opción de página de personalización para iniciar el personalizador de temas.
• Ahora puede volver a la pestaña 'CSS adicional' y en la esquina derecha de su panel de administración, haga clic en el ícono móvil.

Un personalizador le mostrará una vista previa de cómo se ve su sitio web en los teléfonos. El código CSS mencionado a continuación debe agregarse y en el panel de vista previa, el menú móvil desaparecerá.

.navbar-toggle-wrapper { 
pantalla: ninguno; 
}

Asegúrese de haber reemplazado el .nav-toggle-wrapper con el identificador que usa su tema de WordPress.
En la parte superior, haga clic en el 'botón publicar' para guardar todos los cambios.

Haz que un menú específico sea invisible en tu móvil usando CSS

Este es el segundo enfoque para ocultar un 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 su escritorio o dispositivos móviles.

El beneficio de usar este método es que puede utilizar un menú de navegación similar para ocultar los menús en computadoras de escritorio o teléfonos móviles.

• En el panel de WordPress
• Ir a apariencia
• Haga clic en la página del menú
• Pulse el botón de opción de pantalla
• Justo al lado de las opciones de 'Clases CSS' marque la casilla.

Hasta que encuentre el elemento del menú que desea ocultar, desplácese por la página hacia abajo. Encontrará una opción para agregar la clase CSS en la configuración de los elementos del menú. Haga clic en él y agregue la clase CSS .hide-mobile.

Para ocultar un menú móvil, repita este proceso.

Sin embargo, incluso puede hacer clic con el mouse en los elementos del menú que desea hacer invisibles en las computadoras de escritorio. Aquí deberá agregar clases de CSS .hide-desktop.

Ahora guarde los cambios haciendo clic en el 'botón de menú Guardar'.

Para ocultar el menú móvil, debe agregar el código CSS personalizado. Para esto

• Ir a apariencia
• Haga clic en la página del personalizador
• Se lanzará el personalizador de temas
• Ahora haga clic en la pestaña CSS adicional
• Y agregue el código que se proporciona a continuación en el cuadro CSS

@media (ancho mínimo: 980px){
    .hide-desktop{
    pantalla: ninguno !importante;
    }
}
    @media (ancho máximo: 980px){
    .hide-mobile{
    pantalla: ninguno !importante;
    }
}

Ahora puedes comprobar en tu web si el menú móvil que estabas ocultando está visible o no. Probablemente los menús móviles serán invisibles porque estamos siguiendo los pasos para ocultar un menú móvil.

Conclusión:
Esperamos que los dos métodos diferentes mencionados en este blog lo ayuden a ocultar un menú móvil de manera fácil y eficiente.