1 résultat trouvé pour avatar_menu

Header qui chevauche le forum sur la version mobile

Bonjour !

Alors, il y a une propriété CSS qui s'appelle @media
En fonction du @media qu'on veut cibler, par exemple le @media screen (écran sur lequel s'affiche la page), et en fonction de valeurs associées à ce @media, comme par exemple le width (taille du @media screen), on peut associer un code CSS à des caractéristiques particulières de l'écran. Par exemple, si je note ceci :

Code:: @media screen and (max-width: 1120px) { .navigation { width: 130px; } }

Je demande à appliquer un width: 130px sur l'élément .navigation si l'écran qui affiche la page est inférieur à 1120 pixels.
Ça veut dire que pour les écrans plus petits, j'affiche le header plus petit (le .navigation de base étant 150px chez vous).
Et je peux continuer, enchainer :

Code:: @media screen and (max-width: 1090px) { .navigation { width: 110px; } }

Si l'écran est inférieur à 1090px, alors le .navigation passe à width: 110px.
Je ne change que le width du header, mais on pourrait imaginer qu'à partir de 1090px, le header n'est plus une barre fixe à gauche de l'écran, mais un header habituel en haut de la page. Il suffirait de changer le position: fixed; du .navigation, de changer sa valeur top ou left. On pourrait aussi décider de masquer l'élément #avatar_menu lorsque l'écran devient plus petit encore, avec un display: none.

Il y a autant de possibilités de personnalisation que vous le souhaitez en fait !