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.


Una respuesta to “Cómo ocultar o mostrar una opción del menú en función de la resolución de pantalla”

  1. LEANDRO dice:

    ME RE SALVASTE!!!! MUCHISIMAS GRACIASSSSSSSSS

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