Nach Update von 3.3.5 auf 4.9 funktioniert das CSS des Menüs nicht mehr richtig

[dawson]

Hallo zusammen,
ich musste letzte Woche eine Contao 3.3.5-Installation auf v4.9 LTS umziehen.
Das hat soweit ganz gut geklappt bis auf das Hauptmenü im Header-Bereich.

Dies besteht aus mehreren Hauptmenüpunkten nebeneinander und bei Mouse-Over gibts ein Aufklapp-Untermenü.
Nun sind in der v4.9-Version nur noch die Hälfte der Hauptmenüpunkte zu sehen - der Rest ist nach rechts ausserhalb des sichtbaren Bereichs gerutscht, wie wenn die Abstände dazwischen vergrößert worden wären.
In der "Tablet"-Ansichts ists dann wieder etwas besser, weil hier die Abstände grundsätzlich kleiner sind und auch die Schrift kleiner.

Und auch die Unterpunkte im Aufklapp-Menü werden nicht korrekt dargestellt. Hier habe ich zwei Scrollbalken drin (horizontal und vertikal).

Die alte 3.3.5-Version ist immer noch online und funktioniert prächtig in allen Browsern. Da hat sich ja auch nichts geändert.
Aber warum wird es nun nach dem Update derart falsch angezeigt? Hat sich in v4.9 was in Punkto CSS geändert? Muss ich ggf. die Reihenfolge ändern?

Ich muss dazu sagen, dass hier das CSS auch noch mit dem internen Editor angelegt wurde. Hier kommt zwar bei der neuen Version natürlich die Meldung, dass man das bald auslagern sollte, aber eben nur "sollte" und nicht jetzt schon muss - also kanns daran ja nicht liegen, oder?

Hat jemand einen Tipp für mich, an was es ggf. liegen könnte?

Vielen Dank schon mal im Voraus.

[tab]

Du musst im CSS was die Menüs betrifft in den Selektoren "span" durch "strong" ersetzen, weil der aktive Menüpunkt nun als ein strong-Tag ausgegeben wird und nicht mehr als span.

[dawson]

Ah, interessant. Das könnte dann wohl der Grund sein, warum der aktive Menüpunkt unsichtbar wird, wenn man ihn klickt (er also eben aktiv ist) und erst wieder erscheint, wenn man andere Punkte klickt.
Aber das würde nicht erklären, warum die Hauptmenüpunkte grundsätzlich (also die sichtbaren, nicht-aktiven) soweit auseinander stehen.

So sieht derzeit der an den Browser ausgegebene HTML-Code aus:

<ul class="level_1">
  <li class="startseite sibling first"><a href="./" title="Startseite" class="startseite sibling first" itemprop="url"><span itemprop="name">Startseite</span></a></li>
  <li class="submenu sibling"><a href="aktuelles.html" title="Aktuelles" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Aktuelles</span></a>
    <ul class="level_2">
      <li class="first"><a href="eins.html" title="Eins" class="first" itemprop="url"><span itemprop="name">Eins</span></a></li>
      <li><a href="zwei.html" title="Zwei" itemprop="url"><span itemprop="name">Zwei</span></a></li>
      <li class="last"><a href="drei.html" title="Drei" class="last" itemprop="url"><span itemprop="name">Drei</span></a></li>
    </ul>
  </li>

  <li class="active submenu"><strong class="active submenu" aria-haspopup="true" itemprop="name">Aktiv</strong>
    <ul class="level_2">
      <li class="first"><a href="vier.html" title="Vier" class="first" itemprop="url"><span itemprop="name">Vier</span></a></li>
      <li><a href="fuenf.html" title="Fünf" itemprop="url"><span itemprop="name">Fünf</span></a></li>
      <li class="last"><a href="sechs.html" title="Sechs" class="last" itemprop="url"><span itemprop="name">Sechs</span></a></li>
    </ul>
  </li>
</ul>

[tab]

Vergleich einfach mal das HTML der alten mit dem der neuen Seite, dann erkennst du schon was im CSS möglicherweise geändert werden muss. Ich habe das Problem mit größeren Abständen nie gehabt, muss also wohl an deinem speziellen Menü oder CSS hängen. Wenn da noch Javascript im Spiel ist, dann muss da möglicherweise auch noch was geändert werden. Seitenlayouts hast du schon mal alle neu abgespeichert? Das hilft auch manchmal, wenn da z.B. noch alte Einstellungen aktiv waren, die es in Contao 4 nicht mehr gibt und die man deshalb im Backend natürlich auch nicht mehr sehen kann.

[mlweb]

So sieht derzeit der an den Browser ausgegebene HTML-Code aus:

Der Abstand wird sicher nicht aus dem HTML kommen, sondern aus dem CSS.
Link zur Seite?

Verwendest Du das Originaltemplate für die Navigation?

[dawson]

Wollte nur abschließend noch schreiben, an was es lag, falls andere bei der Umstellung das gleiche Problem haben:

Zuvor hatte ich die CSS-Angaben nur erweitert, d.h. "span" UND "strong" hintereinander gesetzt und gleichzeitig stehen lassen.
Das gab aber Probleme, da in Contao 4 nicht nur die aktiven Links von "strong" und nicht von "span" flankiert werden, sondern auch die Aufzählungstexte innerhalb der <li>-Elemente (immer, nicht nur bei aktiven Links) mit <span> umgeben sind.
Dadurch haben sich die CSS-Angaben, die eigentlich nur für aktive Links galten nun auf alle Aufzählungstexte ausgewirkt.

Die Lösung war, dass ich im CSS alle "span"-Angaben durch "strong" ersetzt habe (wie bereits oben von einem Forenmitglied vorgeschlagen).

Dazu fehlte auch noch Font-Awesome, welches man jetzt im Layout als eigenes Script hochladen und hinzufügen muss. (bei Contao 3 war das (zumindest bei meiner Installation, ggf. eine Erweiterung?) noch per Haken in den Einstellungen aktivierbar) und die Schriftbezeichnung nun "Font Awesome 5 Free" bzw. "Font Awesome 5 Brands" lautet.