Hallo
Dann würde ich folgendes CSS vorschlagen:
Code:
@media all {
.navigation a {
display: block;
padding: 0.5rem;
}
}
@media only screen and (min-width: 300px) {
.navigation {
display: flex;
}
.navigation a {
display: block;
padding: 0rem;
}
.navigation img {
margin: 0rem 2rem 0rem 0rem;
}
}
@media only screen and (min-width: 600px) {
.navigation img {
padding: 0rem 0.5rem;
margin: 0rem 0rem 0rem 0rem;
}
.navigation div {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.navigation div a {
padding: 0.3rem 0.5rem;
}
}
Ich habe das Beispiel entsprechend angepasst.
Da ich von versteckten Menüs überhaupt nichts halte habe ich das außen vor gelassen. Das sind nur überflüssige Barrieren.
Du kannst dir aber eine dir zusagende Methode dafür aussuchen und das CSS damit erweitern. Du solltest aber darauf achten, dass das Aufklappmenü barrierefrei ist und auch auf Touchscreengeräten und mit der Tastatur bedienbar ist.
Gruss
MrMurphy