Navigation

[Rolf B]

Hallo Barksalot,

die Zeichen ☰ und × sind unterschiedlich breit. Du musst also dem span eine Breite geben.

Damit das funktioniert, musst Du im expanded=false Fall noch ein display:inline-block für .offen zuordnen, sonst ist es per Default display:inline und nimmt keine width an.

    [aria-expanded="false"] .offen {
        display: inline-block;
    }

   .mainnav button span { width: 1em;}

So richtig zufrieden bin ich mit diesem CSS Grab aber nicht. All dies Markup und CSS Gedöne nur, um ein Zeichen auf fixe Breite zu bekommen. Es sieht unelegant aus. Ich habe gerade nur keine bessere Idee.

Rolf