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

¿Le gustaría ocultar un menú móvil en WordPress? La mayoría de los temas de WordPress vienen con estilos incorporados que convierten automáticamente el menú de navegación en un menú móvil. Sin embargo, es posible que no desee usar el mismo menú en el móvil o es posible que desee usar un estilo de menú diferente. En este artículo, le mostraremos cómo ocultar fácilmente un menú móvil en WordPress usando 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 ligero y se recomienda para principiantes. Utilizaremos un complemento para ocultar el menú móvil existente ofrecido por su tema de WordPress y luego usaremos un menú diferente o no en dispositivos móviles.
Primero, debe visitar la página de la página »Menús y crear un nuevo menú de navegación que desea mostrar en dispositivos móviles.

En la siguiente pantalla, debe proporcionar un nombre para su nuevo menú para ayudarlo a identificarlo más tarde. Lo llamaremos “menú móvil”. Después de eso, puede seleccionar los elementos que desea agregar en su menú en la columna izquierda.

Después de haber terminado de agregar elementos al menú, asegúrese de hacer clic en el botón Menú Salvar para guardar su menú. Si necesita ayuda para crear un nuevo menú de navegación, siga la guía para principiantes para crear un menú de navegación de WordPress.
Luego debe instalar y activar el complemento del menú móvil WP. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Después de la activación, debe visitar la página de opciones de menú móvil para configurar la configuración del complemento. Desde aquí, debe seleccionar si desea mostrar el menú móvil a la derecha o izquierda, activando el conmutador. Luego debe desplazarse hacia abajo hacia el “Ocultar el menú de base original”. Aquí puede decirle al complemento que oculte un menú móvil creado por su tema de WordPress.

Por defecto, el complemento utilizará identificadores de elementos comúnmente utilizados, utilizados por los temas de WordPress más populares. La mayoría de los usuarios no deben hacer nada aquí. Sin embargo, si el complemento no puede ocultar el menú temático, puede regresar aquí y hacer clic en el botón “Buscar el elemento” para simplemente indicar el menú de navegación del tema. Recuerde hacer clic en Guardar los 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ú del complemento.

Simplemente acceda a la página de la página »Menús. Asegúrese de que el menú móvil que creó anteriormente está seleccionado en el menú desplegable. En el elemento de menú, elige 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 base y mostrará un menú personalizado.

El complemento de menú móvil WP le permite cambiar el color de la barra de menú, cambiar la opacidad, agregar iconos y más a la configuración. Siéntase libre de jugar con estas configuraciones. MUNCA 2. Esconte su menú móvil utilizando el código CSS Este método está un poco avanzado y requiere el uso de CSS personalizado. Para este método, puede elegir usar dos enfoques diferentes. Solo puede ocultar un menú móvil completo con CSS o puede ocultar elementos de menú individuales en dispositivos móviles. 1. Ocultar un menú completo en dispositivos móviles primero utilizando CSS, debe darse cuenta del elemento que necesita cambiar con CSS personalizado. Para hacer esto, simplemente vaya a su sitio web y lleve el mouse al menú de navegación. Después de eso, haga clic en la derecha y seleccione la herramienta de inspección.

La pantalla de su navegador se dividirá en dos y verá el código fuente de su página web. Ahora, este menú de navegación no es el que necesita apuntar, porque es visible en la pantalla de escritorio.
Debe reorganizar la pantalla del navegador tirando de la esquina a un tamaño más pequeño hasta que el menú de navegación de escritorio se reemplace con el menú móvil.


Debe averiguar la clase Identificador y CSS utilizada por su menú de navegación de WordPress. Puede hacer esto moviendo el mouse al 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, debe acceder a la página de la página »Personalización en el área de administración de WordPress para iniciar el personalizador del tema. Aquí, debe cambiar a la pestaña “CSS adicional” y hacer clic en el icono móvil en la esquina inferior derecha del panel izquierdo. Ahora puede ingresar el siguiente código CSS y ver su menú móvil desapareciendo en el panel de vista previa … navbar-toogle-wrapper {

Pantalla: ninguno;
}

No olvide reemplazar .Navbar-Toogle-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 ciertos elementos de menú en el menú móvil utilizando CSS Este método le permite crear un menú de navegación y luego mostrar o 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 móvil y de escritorio y simplemente ocultar los elementos que no desea ver. Primero, debe acceder a la página de la página »Menús y hacer clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla. Desde aquí, debe verificar la casilla junto a la opción “Clases CSS”.
Después de lo cual. Debe desplazarse hacia abajo a un elemento de menú que desea ocultar en dispositivos móviles y hacer clic para expandirlo. En la configuración del elemento del menú, ahora verá la opción de agregar una clase CSS. Continúe y agregue la clase CSS. Hide-Mobile.
Repita el proceso para todos los elementos del menú que no desea mostrar en su móvil. Del mismo modo, también puede hacer clic en los elementos del menú que desea ocultar en computadoras de escritorio. Esta vez, agregue la clase CSS. Hide-desktop en su lugar. Una vez que haya terminado, asegúrese de hacer clic en el botón Menú Salvar para almacenar sus cambios. Ahora agregaremos CSS personalizado para ocultar estos elementos del menú. Simplemente acceda a la página de la página »Personalización para iniciar el personalizador del tema y haga clic en la pestaña CSS adicional. Debe agregar el siguiente código CSS al cuadro CSS.@Media (Min-Width: 980px) {
.Hide-desktop {

Pantalla: ¡Ninguno! Importante;

}
}
@Media (max-width: 980px) {
Hide-Mobile {
Pantalla: ¡Ninguno! Importante;
}
}
No olvide hacer clic en el botón Publicar para guardar sus cambios. Ahora puede visitar su sitio y observar que los artículos que desea ocultar en el escritorio ya no son visibles en el menú. Ajuste la pantalla del navegador a un tamaño más pequeño y notará lo mismo para el menú móvil.
Esperamos que este artículo lo ayude a aprender cómo ocultar fácilmente un menú móvil en WordPress. También es posible que desee 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 los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.