Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Menú

Mostrar u ocultar elementos de menú en dispositivos móviles o de escritorio.

En este content HUB te daremos el snippet para que logres mostrar u ocultar elementos de menú en dispositivos móviles o de escritorio. Es un pequeño snippet para WordPress que te permitirá personalizar los elementos del menú que quieras mostrar, en el dispositivo que lo quieras mostrar.

Aprende a cómo hacer menús de navegación personalizados con el Theme Builder con nuestros Tutoriales Premium

A veces, es posible que desees tener un elemento de menú diferente en un tamaño de dispositivo específico y, en este mini-tutorial, verás como mostrar y ocultar los elementos del menú según el tamaño de la pantalla del dispositivo.

El primer paso es agregar este fragmento de CSS en Divi > Opciones de tema > CSS personalizado:

/* Ocultar elementos en Desktop */
@media only screen and (min-width: 981px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Ocultar elementos en tablen / movil */
@media only screen and (max-width: 980px) {
    .hide-on-mobile-tablet {
        display: none !important;
    }
}

Ahora, solo debes agregar esta clase CSS en el elemento del menú que deseas ocultar en tabletas o teléfonos:

hide-on-mobile-tablet

Y usa esta clase CSS en los elementos del menú que deseas ocultar en la vista de escritorio o desktop:

hide-on-desktop

Aquí es donde debes agregarlo en tu menú:

Mostrar u ocultar elementos de menú en dispositivos móviles o de escritorio.

Aprende a crear un banner de promociones flotantes con WordPress y Divi.

NOTA : Si el campo » Clases CSS « no está visible en la pantalla Apariencia > Menús , abre las opciones de pantalla (esquina superior derecha) y marca la casilla de verificación para habilitarlo.

Mostrar u ocultar elementos de menú en dispositivos móviles o de escritorio.

¡Y listo! Super fácil, ¿verdad? ¡Ahora podrás mostrar u ocultar elementos del menú en dispositivos móviles o de escritorio en WordPress!

¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo Snippet.

Contenido Relacionado

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *