Mate Theme: wie bekommt man Text rechts vom Header- Logo (und Nav-Header-Logo)?

[Uwe@Home]

Ich bin bluter Contao-Neuling, der schon einige Stunden verzweifelt versucht, Text neben das Header-Logo zu bekommen.

Hab´ schon mehrere Sachen probiert (Container-Element angelegt und Bild- und Text- Inhaltselemente darunter angelegt,
im Theme unter Header/Logo {{theme::content::MATE01/05}} angehängt und einen passenden Artikel dazu angelegt, etc.)
aber es wird nichts rechts vom Header-Logo ausgegeben.

Wie bekommt man das hin?

[mlweb]

Link zur Seite mit einem Deiner Versuche, wäre vielleicht hilfreich.
Wird das was Du willst gar nicht ausgegeben oder wird es nur nicht dort ausgegeben, wo Du es hin haben möchtest? Letzteres wäre wahrscheinlich ein CSS-Problem.

kleineer Nachtrag noch: Herzlich Willkommen im Forum.

[Uwe@Home]

Vielen Dank für die super-schnelle Antwort!

Die Seite um die es geht, ist jetzt vorübergehend von außen erreichbar, sieht aber noch schrecklich aus.

Wenn man ein neues Inhaltselement vom Typ Text macht, dann wird es darunter ausgegeben.

Hatte auch gehofft, dass bei Angabe der Klasse der Text nur etweder einmal im Header oder
einmal im Navbar-Header auftaucht, er taucht aber immer beide Male auf.

[mlweb]

Wenn Du zwei Textelemente mit dem entsprechenden Inhalt (Gemeinde Birkhausen) angibst, dann tauchen der Inhalt auch zweimal auf, es sei denn Du würdest das per CSS ausblenden. Das Mate Theme benutzt genau die Technik des Ausblendens um eine fixierte Navigation mit unterschiedlichem Logo zu realisieren (fixierter und nicht fixierter Zustand der Navigationsleiste). Die Wechsel des Ein- und Ausblendens passiert aber nur für das Bild. Da Du zusätzlich das Inhaltselement Text dazu genommen hast, müsstest Du das im CSS und JS auf dieses Element übertragen. Alternativ verwendest Du für den Text die Bildunterschrift oder baust Dein Logo als SVG-Datei komplett mit dem Text auf. Bei letzterer Technik erübrigt sich dann auch eine Platzierung des Textes per CSS.

Wenn Du so wie das Markup jetzt ist den Text rechts daneben haben willst, wirst Du auch auf Responsivität achten müssen, denn bei kleineren Bildschirmen passt er da gar nicht hin.
Grundsätzlich kann man das bei Deinem derzeitigen Markup z.B mit Flexbox oder mit CSS-Grid lösen.

/* Textelement ausblenden */
.fixed-nav.content-text {
    display: none;
}


/* Textelement neben Logo */
.nav-wrapper .mod_article {
    display: grid;
    gap: 1rem;
    grid-template-columns: 71px 1fr;
}

Damit bleibt dann allerdings noch das Einblenden des zweiten Zustands. Das passiert aus einer Kombination von js und CSS (habe ich mir allerdings nicht genauer angeschaut) und die Umsetzung für kleinere Bildschirme.
Ich würde wahrscheinlich in dem Fall eher ein SVG verwenden.


Mal nur so am Rand:
Wenn ich mir das Markup an der Stelle anschaue, dann stehen mir schon aus semantischen Gründen alle Nackenhaare zu Berge. Du nutzt eine h4 (Überschrift 4. Ordnung) wahrscheinlich aus optischen Gründen.
Gerade bei einer Seite für eine Gemeinde könnte m.E. Barrierefreiheit eine Rolle spielen und da gehört auch Semantik dazu und zwar nicht nur aus Barrierefreiheitsgründen.

Kleiner Nachtrag noch: Auch bei Deinem Markup reichen im Zustand der fixierten Navigationsliste reine CSS-Anpassungen aus, da über JS eine zusätzliche Klasse gesetzt wird, die man dann für den veränderten Zustand nutzen kann.