Cómo ocultar menús móviles en WordPress (Guía para principiantes)

¿Quiere ocultar el menú móvil en WordPress?

La mayoría de los temas de WordPress tienen estilos integrados que pueden convertir automáticamente sus menús de navegación en menús móviles. Sin embargo, es posible que no desee utilizar el mismo menú en un dispositivo móvil o que desee utilizar un estilo de menú diferente.

En este artículo, le mostraremos cómo ocultar fácilmente el menú móvil en WordPress utilizando complementos o métodos de código.

Método 1. Use un complemento para ocultar el menú móvil en WordPress

Este método es relativamente simple y se recomienda para principiantes. Usaremos un complemento para ocultar el menú móvil existente proporcionado por su tema de WordPress, y luego usaremos un menú diferente o ningún menú en el dispositivo móvil.

Primero, debes visitar Apariencia »Menú Página y cree un nuevo menú de navegación que desee mostrar en su dispositivo móvil.

En la siguiente pantalla, debe proporcionar un nombre para el nuevo menú para ayudarlo a identificarlo más tarde. Lo llamamos el "menú móvil". Luego, puede seleccionar los elementos que desea agregar al menú en la columna de la izquierda.

Después de agregar elementos al menú, asegúrese de hacer clic en el botón "Guardar menú" para guardar el menú.

Si necesita ayuda para crear un nuevo menú de navegación, siga nuestra guía para principiantes para crear un menú de navegación en WordPress.

Luego, debe instalar y activar el complemento WP Mobile Menu. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Después de la activación debe visitar Opciones de menú móvil Página de configuración de configuración del complemento. Desde aquí, debe elegir si desea mostrar el menú de su dispositivo móvil a la derecha o a la izquierda activando el interruptor.

En el menú desplegable, seleccione el menú móvil que creó anteriormente.

Luego, debes desplazarte hacia abajo hasta la sección "Ocultar el menú del tema original". Aquí puede decirle al complemento que oculte el menú móvil creado por su tema de WordPress.

De forma predeterminada, el complemento utilizará los identificadores de elementos comunes utilizados por los temas de WordPress más populares. La mayoría de los usuarios no tienen que hacer nada aquí.

Sin embargo, si el complemento no oculta el menú de su tema, puede volver aquí y hacer clic en el botón "Buscar elemento" para especificar el menú de navegación del tema.

Asegúrese de hacer clic en el botón "Guardar cambios" para guardar su configuración.

Una vez que hemos configurado el complemento, debemos indicarle al sitio de WordPress que muestre nuestro menú móvil en la nueva ubicación del menú agregada por el complemento.

Solo vamos Apariencia »Menú Página. Asegúrese de que el menú móvil que creó anteriormente esté seleccionado en el menú desplegable. Debajo de su elemento de menú, seleccione la ubicación que seleccionó en la configuración del complemento (como el menú móvil izquierdo o el menú móvil derecho).

Ahora puede visitar su sitio web para ver su nuevo menú. El complemento ahora ocultará el menú móvil de su tema y mostrará un menú personalizado.

El complemento de menú de WP Mobile le permite cambiar el color de la barra de menú, cambiar la opacidad, agregar iconos y más. en la configuración. Siéntase libre de usar esta configuración.

Método 2: use código CSS para ocultar el menú móvil

Este método es un poco avanzado y requiere el uso de CSS personalizado.

Puede optar por utilizar dos métodos diferentes para este método. Simplemente puede usar CSS para ocultar todo el menú móvil, o puede ocultar elementos de menú individuales en un dispositivo móvil.

1. Utilice CSS para ocultar todo el menú móvil.

Primero, debe usar CSS personalizado para encontrar los elementos que deben cambiarse. Para hacer esto, simplemente vaya a su sitio web y mueva el mouse al menú de navegación. Luego haga clic derecho y seleccione la herramienta de verificación.

La pantalla de su navegador se dividirá en dos y verá el código fuente de la página web. Ahora bien, este menú de navegación no es lo que necesita punto porque es visible en la pantalla del escritorio.

Debe reorganizar la pantalla del navegador arrastrando la pantalla del navegador desde la esquina a un tamaño más pequeño hasta que el menú de navegación del escritorio sea reemplazado por el del móvil.

Debe comprender los identificadores y las clases de CSS que utiliza el menú de navegación de WordPress. Puede hacer esto moviendo el mouse sobre el código fuente mientras resalta el área del menú.

Como puede ver en la captura de pantalla anterior, nuestro tema de prueba usa la clase navbar-toggle-wrapper.

Entonces tienes que irte Apariencia »Personalizado Página de administración de WordPress para iniciar el personalizador de temas. Aquí debe ir a la pestaña "CSS adicional" y hacer clic en el icono del teléfono móvil en la esquina inferior derecha del panel izquierdo.

La herramienta de personalización ahora mostrará una vista previa de cómo se verá su sitio web en dispositivos móviles. Ahora puede ingresar el siguiente código CSS y ver cómo desaparece el menú de su dispositivo móvil en la ventana de vista previa.

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

Asegúrese de reemplazar .navbar-toggle-wrapper con el ID utilizado por su tema de WordPress.

Luego haga clic en el botón "Publicar" en la parte superior para guardar los cambios.

2. Utilice CSS para ocultar elementos de menú específicos en el menú móvil.

Este método le permite crear un menú de navegación y luego mostrar u ocultar selectivamente elementos que no desea que aparezcan en el escritorio o dispositivo móvil.

La ventaja de este método es que puede usar el mismo menú de navegación para dispositivos móviles y computadoras de escritorio, solo para ocultar elementos que no desea ver.

Primero que nada, tienes que ir Apariencia »Menú Página y luego haga clic en el botón Opciones de visualización en la esquina superior derecha de la pantalla. Desde aquí, debe marcar la casilla junto a la opción "Clase CSS".

Atrás. Debe desplazarse hacia abajo hasta el elemento del menú que desea ocultar en su dispositivo móvil y hacer clic para expandirlo. En la configuración del elemento del menú, ahora verá la opción para agregar clases CSS. Continúe y agregue la clase CSS .hide-mobile allí.

Repita este proceso para todos los elementos del menú que no desee mostrar en su dispositivo móvil.

De la misma manera, también puede hacer clic en los elementos del menú que desea ocultar en su computadora de escritorio. Esta vez, agregue la clase CSS .hide-desktop en su lugar.

Asegúrese de hacer clic en el botón de menú Guardar para guardar los cambios cuando haya terminado.

Ahora agregaremos CSS personalizado para ocultar estos elementos del menú. Solo tienes que ir Apariencia »Personalizado La página inicia la herramienta de personalización de temas y luego hace clic en la pestaña CSS avanzado.

Debe agregar el siguiente código CSS en el campo CSS.

@media (min-width: 980px){

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

}

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

}

Asegúrese de hacer clic en el botón "Publicar" para guardar los cambios.

Ahora que puede visitar su sitio web, notará que los elementos que desea ocultar en el escritorio ya no están visibles en el menú. Ajusta la pantalla del navegador a un tamaño más pequeño y notarás que el menú móvil es el mismo.

Esperamos que este artículo le haya ayudado a comprender cómo ocultar fácilmente los menús móviles en WordPress. También puede consultar nuestro artículo sobre cómo crear una página personalizada de WordPress o cómo crear un tema personalizado desde cero sin escribir código.

Si le gusta este artículo, suscríbase a nuestro canal de tutoriales en vídeo de YouTube para WordPress. También puede encontrarnos en Twitter y Facebook.