0

Básicamente tengo dos menús y quiero que uno aparezca cuando el ancho de pantalla sea grande y desaparezca el otro y viceversa, para tener un menú para PC y otro para móviles pero por alguna razón cuando estrecho la pantalla desaparece el menú de PC pero no aparece el de móviles. Este es el código del CSS:

@media screen and (max-width: 1490px) {
    #menu-categorias{
        display: none;
    }

    #menu-up{
        display:block;
    }
}

El menu-categorias funciona perfectamente, desaparece al estrechar la pantalla pero el menu-up no aparece.

¡Gracias de antemano!

3
  • Claro, porque la lógica está mal. Deberías tener #menu-up siempre en display: block y #menu-categorias siempre en display: none, sin ninguna Media Query. Y establecer la Media Query con min-width donde vas a cambiar el display de ambos. Prueba eso y comenta el resultado. el 14 sep. 2021 a las 12:18
  • Sólo aparece el menú up el 14 sep. 2021 a las 12:56
  • Por eso, el media query modifica lo que ya existe. Si pones la base primero, el media query lo que hará será modificar lo que ya existe.
    – Excorpion
    el 14 sep. 2021 a las 13:06

1 respuesta 1

1

Intenta de la siguiente forma:

/*Primero la vista por defecto de los menus*/
#menu-categorias{ 
    display:none;
}
#menu-up{
    display:block;
}

/*Una vez alcance los 1490px realizas el cambio*/
@media screen and (min-width: 1490px) {
    #menu-categorias{
        display: block;
    }

    #menu-up{
        display: none;
    }
}
1
  • Así si me funciona perfecto, ¡Muchas gracias! el 14 sep. 2021 a las 13:39

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.