Plugins y algunos trucos para WP

Cómo ocultar o mostrar una opción del menú en función de la resolución de pantalla

Problema: Ciente quere mostrar una opción de menu, pero en función de si se ve desde un móvil o desde un PC el enlace ha de ser diferente.

Vayamos por partes, ¿le podemos dar una Clase CSS a un elemento de menú? Sí! pues ya lo tenemos, una vez tengamos esa clase, por CSS y los media query haremos que en función de la resulución se vean o no, ¿Fácil verdad?

Vamos allá, primero, ¿Cómo dar una Clase CSS a un elemento del menú? En el apartado MENÚS, en la parte superior, OPCIONES DE PANTALLA, activaremos la opción de añadir clase:

Una vez hecho esto, veremos que en todos los elementos del menú aparece esto:

Ahora viene la clave, crearemos dos elementos de menú, a uno de pondremos la clase “opiniones” y al otro “opiniones2”.

Guardamos el menú, y en PERSONALIZAR plantilla añadiremos el siguiente CSS:

@media only screen and (min-width: 800px) {
.opiniones {
display: none !important;
}
.opiniones2 {
display: block !important;
}
}

@media only screen and (max-width: 800px) {
.opiniones {
display: block !important;
}
.opiniones2 {
display: none !important;
}
}

Como se puede ver hemos hecho que el “colapso” entre ambos elementos sean 800 pixels, es decir, hasta 800 pixels se mostrará el menú con la clase oponiones2 y partir de 800 pixels se mostrará el elemento de menú con la clase opiniones.

Cómo ocultar o mostrar una opción del menú en función de la resolución de pantalla
¿Te ha resultado útil este artículo? Haz una volariación por favor.

Dejar una respuesta

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

Powered by WordPress | Designed by Elegant ThemesPolítica de privacidad