Discussion :

[sp2308]

Bonjour

Je souhaiterai modifier la couleur des liens quand le site s affiche sur un petit ecran
J ai donc mofifié un parametre comme ceci mais il n est pas pris en compte tout du moins je reduis la fentre de mon chrome au maxi pour pouvoir afficher tel que sur un portable par exemple mais je ne sais pas si cela correspond en terme de media, si c est la taille de l appareil ou du navigateur...

Code :

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

1
2
3
4
@media (max-width: 767px)  {
   .dropdown-menu>li>a { color: #fff000}
 
}

J aimerai donc savoir 2 petites choses :

-existe t il un site qui permet de tester selon la taille du media (j ai pas trouvé)

-ai-je procedé correctement ? (je souhaite modifier la couleur des liens quan le menu est deroulé sur un petit ecran, en tous les cas quand la navigation se fait à l aide du toggle)

merci de votre aide et de vos conseils

stephane

[Muchos]

ai-je procedé correctement ?

Votre code est valide tel quel, mais tentez peut-être :

Code :

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

1
2
3
@media all and (max-width: 767px)  {
   .dropdown-menu > li > a { color: #fff000; }
}

Vérifiez si votre règle CSS cible bien les liens.

existe t il un site qui permet de tester selon la taille du media

Aucune simulation n'est idéale, mais il existe des outils comme :

• le Web Developer de Firefox;
• Opera Mobile Emulator;
• changer les dimensions de l'écran / zoomer !…

[s0h3ck]

@sp2308,

Voici un JS Bin ( edit ) que je vous ai fait pour que vous puissiez expérimenter et découvrir par vous-même.
Si vous avez d'autres questions n'hésitez pas.

@Muchos,

Il ne manquerait pas un « and » comme ceci :
@media all and (max-width: 767px)

D'autres liens pouvant enrichir vos connaissances :

• CSS Media Queries (Mozilla)
• CSS - Bootstrap

Bonne journée!

[sp2308]

merci de vos reponses

J ai telechargé le soft opera (il fallait bien commencer par un...)

et cela fonctionne enfin...

Le css est bien appliqué au drpodown des boutons mais pas de la barre navigation..

qu'à cela ne tienne, je modifie le style par

Code :

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

1
2
3
4
@media  (max-width: 767px)  {
 .navbar-inverse .navbar-nav .dropdown-menu>li>a { color: #fff000}
 
}

et non ça ne fonctionne pas, le style n est pas appliqué...

par contre j ai trouvé les evenements sur la navbar

J ai donc mis ce petit script dans mon index

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script> 
	$('#navbar').on('show.bs.collapse', function () 
		{
			 $('.navbar-inverse .navbar-nav .dropdown-menu>li>a').attr('style', 'color: #ffffff');
			 $('.navbar-inverse .navbar-nav .dropdown-menu>li>a:hover').attr('style', 'background-color: #FFFFFF;color: #000000');
		}
		);
 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  $('.navbar-inverse .navbar-nav .dropdown-menu>li>a').attr('style', 'color: #55555');
 
})
 
</script>

Donc j applique un style à a quand la navbar se deplie et quand elle est cachee un autre pour revenir à la normale...
Là le style change pour a mais rien pour a:hover...

Je laisse encore un peu ouvert ce topic des fois que l un d entre vous serait m expliquer pourqoui...

merci

stephane