¿Quieres ocultar un menú móvil en WordPress? La mayoría de los temas de WordPress vienen con estilos integrados que convierten 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 puede 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.
Contents
Este método es más simple 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. En primer lugar, tienes que visitar el Apariencia »Menús página y cree un nuevo menú de navegación que desee 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. 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 un complemento de WordPress. Tras la activación, debe visitar Opciones de menú móvil página para configurar los ajustes del complemento. Desde allí, 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 pedirle al complemento que oculte un menú móvil creado por su tema de WordPress.
De forma predeterminada, el complemento utilizará los ID 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 apuntar simplemente al menú de navegación de su tema. Recuerde hacer clic en el botón Guardar cambios para guardar 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. Solo ve 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 estos ajustes.
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 con CSS
Primero, debe determinar qué elemento necesita editar usando CSS personalizado. Para hacer esto, simplemente vaya a su sitio web y coloque 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á por la mitad y verá el código fuente de su página web. Ahora bien, este menú de navegación no es el que debe apuntar, ya que está visible en la pantalla del escritorio.
Necesita 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 determinar el identificador y la clase CSS que utiliza su menú de navegación de WordPress. Puede hacer esto 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 tienes que ir a Apariencia »Personalizar 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 los 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 {pantalla: ninguna; } 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 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 computadoras de escritorio y simplemente ocultar los elementos que no desea ver. Primero que nada tienes que 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 allí, debe marcar la casilla junto a la opción ‘Clases CSS’.
Después de eso. debe desplazarse 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.
Repita el proceso para cualquier elemento 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 los escritorios. Esta vez agregue la clase CSS .hide-desktop en su lugar. Una vez que haya terminado, no olvide hacer clic en el botón de menú Guardar para guardar sus cambios. Ahora agregaremos CSS personalizado para ocultar estos elementos del menú. Solo 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 área CSS. @media (ancho mínimo: 980px) {.hide-desktop {display: none! importante; }} @media (max-width: 980px) {.hide-mobile {display: none! importante; }}
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 consultar nuestro artículo sobre cómo crear páginas personalizadas en WordPress o cómo crear un tema personalizado desde cero sin escribir ningún código. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
){kind=link}