Discussion :

[defacta]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Invité]

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[defacta]

Bien vu merci.

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

[Invité]

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

[defacta]

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.