Verwendung: Erweiterung und Ausrichtung Navigation Headder Oneo

Marcel's Avatar

Marcel

20 Apr, 2021 11:10 AM

Produkt: Oneo Contao
Contao-Version: 4.9 LTS

Hallo Rocksolid-Supportteam,

Ich möchte mit Oneo im Headderbereich eine 2-zeilige Navi erreichen, wie sie z. B. auf euren Rocksolid Seiten zu sehen ist, die obere Zeile soll auch sichtbar bleiben, also beide Zeilen scroll-to-fixed.

Obere Zeile:
komplette Breite mit Hintergrundfarbe, Inhalte: Listenelemente mit Links "Anschrift | Telefonnummer | Email" - rechte Seite: "Impressum | Datenschutz"
Beschnitt / Randabstände Inhalte: Bündig mit Contentbereichen (ca. 1200px Fullpage Layout)

Untere Zeile:
Oneo Standard Navi mit Logo, etc. - allerdings Randabstand der Inhalte wie obere Zeile bzw. Contentbereiche darunter.
Die Dropdownmenüs sollten dabei nicht auf die ca. 1200px Contentbreite beschnitten sein, sondern wie bisher etwas ausladender sein (z.B. 1600px.)

Für Eure Hilfe im Voraus dankend verbleibe ich mit besten Grüßen
Marcel

  1. Support Staff 1 Posted by RockSolid Theme... on 20 Apr, 2021 11:50 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Nachricht.

    Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Für die obere Zeile können Sie ein eigenes HTML-Modul anlegen mit z. B. folgendem Inhalt:

    <div class="header-navigation-bar">
        <ul>
            <li>Anschrift</li>
            <li>Telefonnummer</li>
            <li>Email</li>
        </ul>
        <ul>
            <li>Impressum</li>
            <li>Datenschutz</li>
        </ul>
    </div>
    

    Dieses Modul kann anschließend in den Layouteinstellungen vor dem Modul „~ Main Navigation Begin“ eingebunden werden.

    Der CSS-Code für dieses Modul kann z. B. folgendermaßen aussehen, diesen können Sie in die Datei files/oneo/css/custom.css einfügen:

    .header-navigation-bar {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .header-navigation-bar ul, 
    .header-navigation-bar li {
        display: inline;
        margin: 0;
        padding: 0;
    }
    

    Untere Zeile: Oneo Standard Navi mit Logo, etc. - allerdings Randabstand der Inhalte wie obere Zeile bzw. Contentbereiche darunter.

    Diese Darstellung können Sie z. B. mit folgendem CSS-Code realisieren:

    .main-navigation-search {
        margin-right: max(0px, calc(50vw - 640px));
    }
    .logo {
        margin-left: max(0px, calc(50vw - 640px));
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac