La navegación móvil puede hacer o deshacer la experiencia de usuario de tu sitio de WordPress. Y en WPBeginner, hemos descubierto que la configuración predeterminada del menú móvil no siempre se alinea con lo que nuestros usuarios quieren lograr en sus sitios web.
Si bien los temas de WordPress hacen un buen trabajo al convertir los menús de escritorio en versiones aptas para dispositivos móviles, esta conversión automática no siempre es la mejor solución.
Nuestros usuarios a menudo necesitan mostrar diferentes opciones de navegación para sus visitantes móviles, ya sea por simplicidad, promociones especiales o mejores tasas de conversión.
En este artículo, te mostraremos cómo ocultar fácilmente el menú móvil predeterminado en WordPress para que puedas mostrar un menú personalizado en su lugar.
Cubriremos dos métodos diferentes en este tutorial, y puedes usar los enlaces rápidos a continuación para saltar al método que deseas usar:
- Método 1: Ocultar un menú móvil en WordPress usando un plugin
- Método 2: Ocultar el menú móvil usando código CSS
Método 1: Ocultar un menú móvil en WordPress usando un plugin
La forma más fácil de ocultar el menú móvil proporcionado por tu tema de WordPress es usando el plugin WP Mobile Menu.
Este plugin te permite crear un menú único y luego mostrarlo a los usuarios móviles. También puedes ocultar el menú móvil que muchos temas proporcionan por defecto.
Crea tu menú móvil
Primero, necesitas crear el menú de navegación que deseas mostrar en dispositivos móviles. Para empezar, dirígete a la página Apariencia » Menús en tu panel de WordPress.
En la siguiente pantalla, necesitas escribir un nombre para el menú. Es una buena idea usar algo que te ayude a identificar el menú más tarde, como 'Menú Móvil'.
Después de eso, puedes seleccionar todas las publicaciones y páginas que deseas agregar al menú móvil.
Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo crear un menú de navegación en WordPress.
Cuando estés satisfecho con el diseño del menú, recuerda hacer clic en el botón ‘Guardar menú’ para guardar tus cambios.
Configurar los ajustes del plugin
Con eso hecho, es hora de instalar y activar el plugin WP Mobile Menu. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, dirígete a Opciones del menú móvil para configurar los ajustes del plugin.
Aquí, debes desplazarte hasta el final de la página y elegir si mostrar el menú móvil en el lado izquierdo o derecho de la pantalla usando los interruptores ‘Habilitar menú izquierdo/derecho’.
A continuación, abre el menú desplegable ‘Elegir un menú’ y selecciona el menú móvil que creaste anteriormente.
Después de eso, simplemente haz clic en ‘Guardar cambios’.
Hay muchas maneras de estilizar tu menú de navegación de WordPress. Por ejemplo, puedes seleccionar ‘Opciones de fuente’ y luego cambiar el tamaño de la fuente, el grosor, el espaciado y más.
También puedes seleccionar ‘Estilo de encabezado’ y cambiar cómo se ve y funciona el encabezado móvil.
Por ejemplo, puedes agregar una sombra, cambiar la altura del encabezado, crear un menú de navegación fijo, y más.
La mayoría de estas configuraciones son sencillas, por lo que puedes revisarlas y ver qué tipos de efectos puedes crear. Por ejemplo, puedes agregar un icono de imagen o agregar CSS a tus menús de WordPress.
Cuando estés satisfecho con la configuración del menú móvil, simplemente haz clic en 'Guardar cambios'.
Agrega tu menú móvil a WordPress
Ahora que has configurado el plugin, el siguiente paso es indicarle a WordPress dónde mostrar el menú móvil yendo a Apariencia » Menús.
Si aún no está seleccionado, abre el menú desplegable ‘Seleccionar un menú para editar’ y elige el menú móvil que creaste anteriormente.
Luego, en ‘Configuración del menú’, debes seleccionar ‘Menú móvil izquierdo’ o ‘Menú móvil derecho’, dependiendo de dónde quieras mostrar el menú.
Después de eso, simplemente haz clic en ‘Guardar menú’.
Ahora, visita tu sitio web en un dispositivo móvil o ve la versión móvil de tu sitio de WordPress desde el escritorio. Deberías ver el menú móvil personalizado.
Solución de problemas: Cómo ocultar el menú móvil predeterminado
Por defecto, el plugin oculta automáticamente los elementos del menú utilizados por la mayoría de los temas populares de WordPress. Esto significa que el menú móvil predeterminado de tu tema debería ocultarse sin que necesites hacer nada.
Sin embargo, si el menú móvil predeterminado sigue apareciendo, deberás ir a Opciones del menú móvil » Opciones generales » Opciones de visibilidad en el panel de WordPress.
Aquí, haz clic en el botón ‘Buscar elemento’.
Esto abre una versión móvil de tu sitio web.
En esta ventana emergente, haz clic para seleccionar el contenido que deseas ocultar en dispositivos móviles, como el menú proporcionado por tu tema de WordPress.
Esto agrega la clase CSS del contenido al campo ‘Ocultar elementos’.
Hecho esto, haz clic en ‘Guardar cambios’. Ahora, el menú del tema ya no debería aparecer en los dispositivos móviles.
Método 2: Ocultar el menú móvil usando código CSS
Este método es un poco avanzado y requiere que agregues código personalizado a tu sitio web.
Para este método, puedes elegir entre dos enfoques diferentes. Puedes ocultar el menú móvil predeterminado completo usando CSS, o puedes ocultar elementos de menú individuales en dispositivos móviles.
1. Ocultar un menú completo en dispositivos móviles usando CSS
Una opción es eliminar por completo el menú móvil predeterminado de tu tema de WordPress. Esta es una buena opción si deseas utilizar un método de navegación diferente en dispositivos móviles, como enlaces de navegación de migas de pan o imágenes interactivas.
Primero, necesitas encontrar el elemento que debes modificar. Para hacerlo, simplemente ve a tu sitio web de WordPress y coloca el cursor del mouse sobre el menú de navegación.
Después de eso, haz clic derecho y selecciona la herramienta Inspeccionar de tu navegador.
La pantalla de tu navegador ahora se dividirá en dos, y verás el código de la página, incluido el código del menú de navegación.
Sin embargo, no queremos cambiar este menú de navegación ya que lo vemos en la pantalla de escritorio.
Afortunadamente, hay una manera fácil de acceder al menú móvil en su lugar.
Simplemente arrastra la esquina del navegador para hacerlo más pequeño hasta que WordPress reemplace el menú de navegación de escritorio con el menú móvil.
Ahora, necesitas averiguar el identificador y la clase CSS que utiliza el menú de navegación móvil. Simplemente mueve el mouse sobre el código fuente hasta que tu navegador resalte el área del menú. Esta sección contiene la clase y el identificador que necesitas usar.
Una vez que tengas esta información, puedes ocultar el menú en dispositivos móviles usando código.
A menudo, las guías de WordPress te pedirán que agregues código personalizado a tu archivo functions.php. Sin embargo, esto no es muy amigable para el usuario, e incluso un pequeño error en el código puede causar todo tipo de errores comunes de WordPress. El código personalizado incluso puede romper completamente tu sitio web.
En su lugar, es más seguro agregar código personalizado usando WPCode.
Este plugin gratuito facilita agregar CSS personalizado, PHP, HTML y más a WordPress sin poner tu sitio en riesgo. Simplemente puedes pegar el código del plugin en el editor de WPCode, y luego activar y desactivar el código con un clic.
Para empezar, necesitarás instalar y activar WPCode. Para más información, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de eso, ve a Fragmentos de código » Agregar fragmento en el panel de WordPress.
Aquí verás todos los fragmentos prehechos que puedes agregar a tu sitio. Esto incluye un fragmento que te permite deshabilitar completamente los comentarios, subir tipos de archivo que WordPress normalmente no soporta, deshabilitar páginas de adjuntos, y mucho más.
Para agregar CSS personalizado a tu sitio, simplemente pasa el cursor sobre ‘Agregar tu código personalizado’ y luego haz clic en el botón ‘+ Agregar fragmento personalizado’.
Luego, selecciona ‘Fragmento CSS’ como el tipo de código de la lista de opciones que aparecen en la pantalla.
Esto te llevará a la página Crear fragmento personalizado.
Para empezar, escribe un título para el fragmento de código. Podría ser cualquier cosa que te ayude a identificar el fragmento en tu panel de WordPress.
Después de eso, puedes pegar o escribir el siguiente código en el editor de código:
.navbar-toggle-wrapper {
display:none;
}
No olvides reemplazar .navbar-toggle-wrapper con el identificador que encontraste usando la herramienta Inspeccionar de tu navegador.
Cuando estés listo para publicar el fragmento de código, desplázate hasta la parte superior de la pantalla y haz clic en el interruptor ‘Inactivo’ para que cambie a ‘Activo’.
Finalmente, haz clic en ‘Guardar fragmento’ para que el fragmento se publique.
Ahora, el menú móvil de tu tema estará oculto en teléfonos inteligentes y tabletas.
2. Ocultar elementos de menú específicos en el menú móvil usando CSS
Este método te permite crear un menú de navegación y luego mostrar u ocultar selectivamente elementos que no deseas que aparezcan en dispositivos móviles o de escritorio.
De esta manera, puedes usar el mismo menú de navegación para visitantes móviles y de escritorio. Primero, ve a Apariencia » Menús.
Hecho esto, haz clic en el botón ‘Opciones de pantalla’ en la esquina superior derecha de la pantalla.
Desde aquí, necesitas marcar la casilla junto a la opción ‘Clases CSS’.
Después de eso, desplázate hasta un elemento del menú que quieras ocultar en dispositivos móviles y haz clic para expandirlo.
En la configuración del elemento del menú, verás la opción para agregar una clase CSS. Aquí, simplemente procede y agrega una clase CSS .hide-mobile.
Repite el proceso para todos los elementos del menú que quieras ocultar en dispositivos móviles.
De manera similar, puedes hacer clic en cualquier elemento del menú que quieras ocultar en computadoras de escritorio. Sin embargo, esta vez, agrega la clase CSS .hide-desktop en su lugar.
Cuando hayas terminado, no olvides hacer clic en el botón ‘Guardar menú’ para almacenar tus cambios.
Hecho esto, estás listo para ocultar estos elementos del menú usando CSS personalizado. Simplemente crea un nuevo fragmento de código personalizado siguiendo el mismo proceso descrito anteriormente.
Ahora, puedes agregar el siguiente CSS al editor de código WPCode:
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
Después de eso, simplemente publica el fragmento de código.
Ahora, si visitas tu blog de WordPress, verás que los elementos del menú que querías ocultar en el escritorio ya no son visibles. Para probar cómo se ve el menú en dispositivos móviles, simplemente reduce el tamaño de la pantalla del navegador hasta que WordPress cambie al menú móvil.
Esperamos que este artículo te haya ayudado a aprender cómo ocultar fácilmente un menú móvil en WordPress. También puedes consultar nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar de WordPress y nuestra guía sobre cómo agregar lógica condicional a los menús.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Ricardo Ideas
excelente, simple y efectiva, funciono perfecto, muchas gracias
Jiří Vaněk
Creé un menú deslizante siguiendo tu guía. Estoy familiarizado con el inspector, pero a veces me resulta difícil navegar y encontrar cosas en él. Seguí tu guía para encontrar la clase CSS. Finalmente la encontré. El primer intento me llevó bastante tiempo, pero ahora sé cómo hacerlo y cualquier búsqueda futura será mucho más fácil porque finalmente aprendí a usar y entender mejor esta herramienta. En cuanto a los navegadores, Firefox me facilitó más la búsqueda.