Bonjour,

Je suis actuellement sur un petit site internet que j'ai commencé après le cours HTML/CSS de Mateo. Mon souci étant:

dans mon header j'ai 2 éléments:

-un <div> vide (contient simplement une image dans son background, c'est ma bannière enfaite)

-un menu de navigation

dans mon CSS, les 2 éléments sont l'un en dessous de l'autre:

header

{

height: 285px;

display: flex;

flex-direction: column;

margin-bottom: -25px;

}

#Bannière

{

background: url('image/Bannière.png') no-repeat;

    height: 245px;

}

nav

{

position: relative;

top: -24px;

}

.MenuNav

{

font-family: 'Audiowide', cursive;

color: yellow;

background-color: rgba(50,50,50,100%);

display: flex;

flex-direction: row; //mon menu de navigation est à l'horizontale

justify-content: space-around;

padding: 10px;

}

Lorsque mon écran deviens trop petit pour contenir mon menu de navigation (750px environ) je souhaite placer les 2 éléments de mon header côte à côte (bannière à gauche, menu de navigation à droite) et changer mon menu de navigation vers la verticale:

@media screen and (max-width:750px)

{

nav

{

top: 0px;

}

.MenuNav

{

flex-direction: column;

}

header

{

flex-direction: row;

}

}

J'ai testé pas mal de choses mais sans succès. Apparemment c'est "@media screen and (max-width:750px)" qui bug mais je ne trouve pas pourquoi.