barre de menu perd sa réactivité après le point d'arrêt

Question

La barre de menus n'a pas été redimensionnée correctement lorsque la taille de la fenêtre du navigateur est inférieure à 900 px.
La barre reste trop large, du contenu est masqué et une barre de défilement horizontale apparaît également.

J'ai essayé de faire fonctionner cette barre de menu pendant deux jours maintenant. Je ne peux même pas souligner le problème. J'ai essayé tout ce qui me venait à l'esprit.

Je suppose que l'erreur est quelque part dans le

@media screen and (min-width:900px) 

here is a pen with all the code because I thought it's too much code to paste here

Answer 1

vous pouvez ajouter chaque élément ci-dessous le reste à l'aide FlexBox-wrap, cela va déplacer des éléments à une nouvelle ligne si l'espace est trop petit

.site-nav>ul { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: stretch; 
    flex-wrap:wrap; 
} 

codepen

vous pouvez également ajouter la marge vers le haut du menu pour éviter le débordement que sur les petits appareils

@media (max-width :800px){ 
    .site-nav { 
    z-index: 999999999999999999; 
    margin-top: 25px; 
    }