¿Quieres ocultar un menú móvil en WordPress?
La mayoría de los temas de WordPress vienen con estilos integrados que transforman automáticamente sus menús de navegación en un menú móvil.
Sin embargo, es posible que no desee utilizar el mismo menú en el dispositivo móvil o que desee utilizar un estilo de menú diferente.
En este artículo, le mostraremos cómo ocultar fácilmente un menú móvil en WordPress utilizando un complemento o método de código.
Método 1.
Ocultar un menú móvil en WordPress usando un complemento
Este método es más fácil y se recomienda para principiantes.
Usaremos un complemento para ocultar su menú móvil existente proporcionado por su tema de WordPress y luego usaremos un menú diferente o ningún menú en los dispositivos móviles.
Primero, debe visitar el Apariencia »Menús página y cree un nuevo menú de navegación que le gustaría mostrar en dispositivos móviles.
En la siguiente pantalla, debe proporcionar un nombre para su nuevo menú que lo ayude a identificarlo más tarde.
Lo llamaremos ‘Menú móvil’.
Después de eso, puede seleccionar los elementos que desea agregar a su menú en la columna de la izquierda.
Una vez que haya terminado de agregar elementos a su menú, no olvide hacer clic en el botón Guardar menú para guardar su 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.
A continuación, 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 un complemento de WordPress.
Tras la activación, debe visitar Opciones del menú móvil página para configurar los ajustes del complemento.
Desde aquí, debe seleccionar si desea mostrar el menú de su dispositivo móvil a la derecha oa la izquierda activando el interruptor.
En el menú desplegable, seleccione el menú móvil que creó anteriormente.
A continuación, debe desplazarse hacia abajo hasta la sección ‘Ocultar menú de tema original’.
Aquí es donde puede decirle al complemento que oculte un menú móvil creado por su tema de WordPress.
De forma predeterminada, el complemento utilizará identificadores de elementos de uso común utilizados por los temas de WordPress más populares.
La mayoría de los usuarios no necesitarían 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 simplemente señalar el menú de navegación de su tema.
No olvide hacer clic en el botón Guardar cambios para almacenar su configuración.
Ahora 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.
Simplemente, vaya al Apariencia »Menús 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ú, elija la ubicación que seleccionó en la configuración del complemento (por ejemplo, menú móvil izquierdo o menú móvil derecho).
Ahora puede visitar su sitio web para ver su nuevo menú en acción.
El complemento ahora ocultará el menú móvil de su tema y mostrará un menú personalizado en su lugar.
El complemento WP Mobile Menu le permite cambiar el color de la barra de menú, cambiar la opacidad, agregar iconos y más en la configuración.
Siéntete libre de jugar con esos ajustes.
Método 2.
Ocultar el menú móvil usando código CSS
Este método es un poco avanzado y requiere el uso de CSS personalizado.
Para este método, puede optar por utilizar dos enfoques diferentes.
Simplemente puede ocultar un menú móvil completo usando CSS, o puede ocultar elementos de menú individuales en dispositivos móviles.
1.
Ocultar un menú completo en dispositivos móviles mediante CSS
Primero, necesita averiguar el elemento que necesita modificar usando CSS personalizado.
Para hacer eso, simplemente vaya a su sitio web y lleve el mouse a su menú de navegación.
Después de eso, haga clic derecho y seleccione Inspeccionar herramienta.
La pantalla de su navegador se dividirá en dos y verá el código fuente de su página web.
Ahora bien, este menú de navegación no es el que necesita para apuntar porque está visible en la pantalla del escritorio.
Debe reorganizar la pantalla de su navegador arrastrándola desde la esquina a un tamaño más pequeño hasta que el menú de navegación del escritorio sea reemplazado por el menú móvil.
Debe averiguar el identificador y la clase CSS que utiliza su menú de navegación de WordPress.
Puede hacerlo moviendo el mouse sobre el código fuente hasta que se resalte el área del menú.
Como puede ver en la captura de pantalla anterior, nuestro tema de prueba usa la clase navbar-toggle-wrapper.
Después de eso, debes ir a Apariencia »Personalizar página en el área de administración de WordPress para iniciar el personalizador de temas.
Aquí, debe cambiar a la pestaña ‘CSS adicional’ y hacer clic en el icono del móvil en la esquina inferior derecha del panel izquierdo.
El personalizador ahora mostrará una vista previa de cómo se verá su sitio en dispositivos móviles.
Ahora puede ingresar el siguiente código CSS y ver que su menú móvil desaparece en el panel de vista previa.
.navbar-toggle-wrapper {
display:none;
}
No olvide reemplazar el .navbar-toggle-wrapper con el identificador utilizado por su tema de WordPress.
Después de eso, haga clic en el botón ‘Publicar’ en la parte superior para guardar sus cambios.
2.
Ocultar elementos de menú específicos en el menú móvil mediante CSS
Este método le permite crear un menú de navegación y luego mostrar u ocultar de forma selectiva elementos que no desea mostrar en dispositivos móviles o de escritorio.
La ventaja de este método es que puede usar el mismo menú de navegación para dispositivos móviles y computadoras de escritorio y simplemente ocultar los elementos que no desea que se vean.
Primero, debes ir a Apariencia »Menús página y haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla.
Desde aquí, debe marcar la casilla junto a la opción ‘Clases CSS’.
Después.
debe desplazarse hacia abajo hasta un elemento del menú que desea ocultar en los dispositivos móviles y hacer clic para expandirlo.
En la configuración del elemento del menú, ahora verá la opción para agregar una clase CSS.
Continúe y agregue la clase CSS .hide-mobile allí.
Repita el proceso para todos los elementos del menú que no desea mostrar en el dispositivo móvil.
Del mismo modo, también puede hacer clic en los elementos del menú que desea ocultar en las computadoras de escritorio.
Esta vez, agregue la clase CSS .hide-desktop en su lugar.
Una vez que haya terminado, no olvide hacer clic en el botón Guardar menú para almacenar sus cambios.
Ahora agregaremos CSS personalizado para ocultar estos elementos del menú.
Simplemente ve al Apariencia »Personalizar página para iniciar el Personalizador de temas y haga clic en la pestaña CSS adicional.
Debe agregar el siguiente código CSS en el cuadro CSS.
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
No olvide hacer clic en el botón Publicar para guardar sus cambios.
Ahora puede visitar su sitio web y notará que los elementos que deseaba ocultar en el escritorio ya no están visibles en el menú.
Ajuste la pantalla de su navegador a un tamaño más pequeño y notará lo mismo para el menú móvil.
Esperamos que este artículo le haya ayudado a aprender cómo ocultar fácilmente un menú móvil en WordPress.
También puede querer ver nuestro artículo sobre cómo crear páginas personalizadas en WordPress o cómo crear un tema personalizado desde cero sin escribir código.
Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress.
También puedes encontrarnos en Twitter y Facebook.
