Bonjour, j'ai commencé un site depuis peu et j'ai un petit problème.

J'ai utilisé une class "sticky-top" afin que mon menu ne bouge pas.

Voici ce que ça donne sur grand écran :

Et sur petit écran :

Pour ce qui est des grands écrans, c'est parfait mais ça se complique au niveau des petits écrans. Vu que j'ai mis une class "sticky-top", cela fonctionne aussi pour les petits écrans donc le gros bloc cache tout.

Ce que j'aimerais c'est que la class "sticky-top" fonctionne pour les grands écrans mais pas pour les petits écrans.

J'espère que j'ai été assez claire.. Merci d'avance !!

Tu fait ton CSS sans sticky-top et tu utilise les règles @media pour le desktop en les rajoutent dedans

exen a écrit:

Tu fait ton CSS sans sticky-top et tu utilise les règles @media pour le desktop en les rajoutent dedans

Le problème c'est que j'ai du mal avec les règles @media..

@media screen and (max-width: 650px) {
     .sticky-top {
          attribut: valeur;
     }
}

FloJDM a écrit:

@media screen and (max-width: 650px) {
     .sticky-top {
          attribut: valeur;
     }
}

Que mettre à la place de l'attribut ? (Désoler j'ai vraiment du mal)

Bah ce que tu veux comme règle css je sais pas moi par exemple 

@media screen and (max-width: 650px) {
     .sticky-top {
          display: none;
     }
}

FloJDM a écrit:

Bah ce que tu veux comme règle css je sais pas moi par exemple 

@media screen and (max-width: 650px) {
     .sticky-top {
          display: none;
     }
}

Je veux juste que lorsque la taille de l'écran est inférieur à 650px, que le menu n'ait plus la class sticky-top

Bonjour,

et bien c'est exactement ce que dit la règle juste au dessus.

Hello,

Pour le fonctionnement des media queries c'est ni plus ni moins que des conditions.

Je ne sais pas si tu connais des langages de programmation (HTML / CSS ne sont pas de la programmation) mais tu peux voir ça comme un if.

Quand les conditions sont validées elles s'appliquent sinon, c'est les règles CSS normalement défini qui prennent le dessus.

Plutôt qu'un display: none; je dirais qu'un display: inherit serait plus adapté. Mieux vaut un affichage moche plutôt que ne rien affiché.

Plutôt qu'un display: none; je dirais qu'un display: inherit serait plus adapté. Mieux vaut un affichage moche plutôt que ne rien affiché.

J'ai essayé mais rien ne fonctionne..

Je ne sais pas si tu connais des langages de programmation (HTML / CSS ne sont pas de la programmation) mais tu peux voir ça comme un if.

Il est possible de faire ça avec les règles @media ?

-
Edité par emmagrd72 15 avril 2019 à 18:28:59

Re,

Alors dans ce cas test l'inverse pour tes sticky,  dans ton css focalise en 1er lieux sur le design de ton menu mobile.

En gros dans ton css de base tu ne met pas les sticky, tu va ajouter une règles pour qu'ils entre en actions au moment ou l'écran passe à 992px :

@media screen and (min-width: 992px) {
     .sticky-top {
          /* les règles de ton sticky-top */
     }
}

-
Edité par exen 16 avril 2019 à 11:01:30

emmagrd72 a écrit:

Je ne sais pas si tu connais des langages de programmation (HTML / CSS ne sont pas de la programmation) mais tu peux voir ça comme un if.

Il est possible de faire ça avec les règles @media ?

Non, le if n'existe pas en CSS.

Mais on peut traduire les media queries comme cela.

if (sreen and width: 992px) { // si le support est un écran et que la fenêtre est inférieure à 992px alors
    display: none;            // ensemble des règles appliquées si les conditions sont vérifiées

}

Le if est remplacé par @media et est suivi des conditions !

-
Edité par vernaisc 16 avril 2019 à 9:22:11

try out  @media (min-height: 480px) {

 .sticky-top {

 position: -webkit-sticky; position: sticky; top: 0; } }

Bonsoir à tous, je dois bien avouer que j'avais un peu abandonné ce projet à cause de la reprise des cours.. Maintenant je m'y suis remise et j'ai trouvé la solution (enfin) grâce à vous donc merci beaucoup et merci pour votre temps passé à me répondre (et me faire comprendre tant bien que mal..)