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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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