Bootstrap et @media

Bonjour,

Je me suis basé sur cet exemple pour cacher la navbar quand on scroll vers le bas et la réafficher quand on scroll vers le haut :

http://codepen.io/Craig-Watson/pen/zGbNRL

Pour essayer, il vous suffit de réduire la taille de la fenêtre du navigateur.

Chez moi cela marche si je mets ceci dans le CSS :

Code:

---

1 2 3 4

.navbar-scroll-custom { transform: translateY(-52px); transition-duration: 0.6s; }

---

Par contre si j'ajoute le @media comme dans l'exemple cela ne marche plus :

Code:

---

1 2 3 4 5 6

.navbar-scroll-custom { @media (max-width: 768px) { transform: translateY(-52px); transition-duration: 0.6s; } }

---

Dans l'exemple cela marche bien.

J'ai changé la source du css bootstrap pour mettre les CDN mais c'est pareil, cela ne fonctionne pas quand je précise @media dans le CSS.

Quelqu'un aurait une idée, là je sèche.

Merci,
Vincent.

Bonjour,

Code:

---

1 2 3 4 5 6

@media (max-width: 768px) { .navbar-scroll-custom { transform: translateY(-52px); transition-duration: 0.6s; } }

---

Bien vu merci.

C'est quand même étonnant que ce le CSS doive être différemment ordonné. Quelqu'un sait pourquoi ?

Ben oui...
il faut donner les instructions dans le bon ordre... :aie:

Oui mais je veux dire je l'ai mis dans cet ordre là http://codepen.io/Craig-Watson/pen/zGbNRL

Cet exemple marche correctement, il suffit de réduire la taille de la fenêtre du navigateur pour le tester. C'est pour ça que je trouve ça étonnant.