¿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 provisto por su tema de WordPress y luego usaremos un menú diferente o ningún menú en dispositivos móviles.
En primer lugar, debe visitar el Apariencia » Menús página y cree un nuevo menú de navegación que le gustaría mostrar en los dispositivos móviles.
En la siguiente pantalla, debe proporcionar un nombre para su nuevo menú que lo ayude a identificarlo más adelante. 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 Menú móvil de WP enchufar. 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 de menú móvil página para configurar los ajustes del complemento. Desde aquí, debe seleccionar si desea mostrar su menú móvil a la derecha o a 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 logra ocultar 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 decirle al sitio de WordPress que muestre nuestro menú móvil en la nueva ubicación del menú agregada por el complemento.
Simplemente, vaya a la 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 íconos y más en la configuración. Siéntete libre de jugar con esos ajustes.
Método 2. Ocultar menú móvil usando código CSS
Este método es un poco avanzado y requiere que se use algún CSS personalizado.
Para este método, puede optar por utilizar dos enfoques diferentes. Puede simplemente 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 usando CSS
Primero, debe averiguar el elemento que necesita modificar usando CSS personalizado. Para hacer eso, simplemente vaya a su sitio web y pase el mouse sobre su menú de navegación. Después de eso, haga clic derecho y seleccione la herramienta Inspeccionar.
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 debe orientar 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 de CSS utilizados por 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 está usando el navbar-toggle-wrapper clase.
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 ícono 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 desaparecer su menú móvil 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 los cambios.
2. Ocultar elementos de menú específicos en el menú móvil usando CSS
Este método le permite crear un menú de navegación y luego mostrar u ocultar selectivamente 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 de escritorio y simplemente ocultar los elementos que no desea que se vean.
Primero, tienes que ir a Apariencia » Menús 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 el 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 .hide-mobile clase de CSS allí.
Repita el proceso para todos los elementos del menú que no desee 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 el .hide-desktop Clase CSS 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 a la Apariencia » Personalizar 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 los cambios.
Ahora puede visitar su sitio web y notará que los elementos que quería 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 también.
Esperamos que este artículo le haya ayudado a aprender cómo ocultar fácilmente un menú móvil en WordPress. También puede consultar 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.
.