[Problème] affichage différent sur smartphone d'un menu sont alignement sur 1 ligne

[herve]

Bonjour
Je galère depuis pas mal de temps pour avoir un affichage différent de ce qui est possible par défaut pur joomla 4, sur un menu sur un petit écran.
J'ai d'autant plus de difficulté que j’utilise le mode inspecter sur le navigateur de l'ordi de bureau pas .. le smartphone, ce qui n'est pas simple.

1/ alignement sur 1 ligne
sans @media cela fonctionne mais plus du tout si j’ajoute la condition pour les petits écrans
Est-ce que cela est la meilleure solution? sans effet de bord (je ne vois pas exactement la même chose quand je rétrécis la taille de l'onglet du navigateur sur le PC ?

@media only screen and (orientation: portrait) and (max-width: 500px) body > header > div.grid-child.container-below-top > ul {
display: contents;
}
@media only screen and (orientation: portrait) and (max-width: 500px) body > header > div.grid-child.container-below-top > ul > li > a {
margin: 5px;
}

2/ passage mode hamburger sans ce mode s'il ne reste plus qu'un élément.
Imaginez un menu "hamburger" s'il y a x lignes mais qui reste dans ce mode même s'il n'y a plus qu'un élément (par exemple après connexion)
Est-ce qu'il y aurait une solution simple pour gérer cette situation?

[Colnem30]

Bonjour
J'ai d'autant plus de difficulté que j’utilise le mode inspecter sur le navigateur de l'ordi de bureau pas .. le smartphone, ce qui n'est pas simple.

Ben, ma foi, pour simuler un smartphone ave un ordinateur de bureau, suffit de redimensionner la page à une largeur d'environ 600 pixels...
Sinon, il y a de sites qui font très bien l'affaire...

Je rajoute qu'il y a une erreur de syntaxe.
Il faut écrire:

@media only screen and (orientation: portrait) and (max-width: 500px) { body > header > div.grid-child.container-below-top > ul { display: contents; }}

Double accolades.