Verwendung: MainNavigation unter den Logo links platzieren

Sascha von der Heide's Avatar

Sascha von der Heide

14 Feb, 2021 04:04 PM

Produkt: Tao Contao

Moin,

ich habe ein etwas grosses Logo, sodass ich gerne die Navigation immer unter dem Logo haben möchte. Ich hatte hier im Forum schon etwas gesucht und bin bei folgendem CSS hängengeblieben, das sollte dem Support nach genau dafür sorgen. Ich habe es in die custrom.css eingebaut, aber nun wird die Hauptnavigation vom Logo verdeckt. Wo ist mein Fehler?

.header-navigation-inner {
    height: 10em;
    min-height: 7em;
}
@media screen and (max-width: 900px) {
    .header-navigation-inner {
        height: auto;
        min-height: 0;
    }
}
.logo {
    top: 1em;
    bottom: 4em;
}
.main-navigation {
    position: absolute;
    left: 2%;
    bottom: 0;
    width: 96%;
    height: 4em;
}
@media screen and (max-width: 900px) {
    .main-navigation {
        position:relative;
        bottom: auto;
        left: auto;
        height:3.125em;
    }
}
  1. Support Staff 1 Posted by RockSolid Theme... on 15 Feb, 2021 08:38 AM

    RockSolid Themes's Avatar

    Wir haben den CSS-Code soeben erneut getestet und konnten keine Probleme damit feststellen.

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  2. 2 Posted by Sascha von der ... on 15 Feb, 2021 08:49 AM

    Sascha von der Heide's Avatar

    Guten Morgen,

    sehr gerne: [Link entfernt]

    Mit freundlichen Grüßen

  3. Support Staff 3 Posted by RockSolid Theme... on 15 Feb, 2021 08:59 AM

    RockSolid Themes's Avatar

    Anscheinend ist die Reihenfolge der eingebunden CSS-Dateien auf Ihrer Website fehlerhaft. Bitte bearbeiten Sie die Layouteinstellungen im Backend unter „Layout › Themes › Tao Seitenlayouts“ und ändern Sie die Reihenfolge der „Externen Stylesheets“ wie folgt:

    1. normalize.css
    2. icons.css
    3. main.css
    4. custom.css

    Haben Sie diese Reihenfolge zuvor selbst verändert?

  4. 4 Posted by Sascha von der ... on 15 Feb, 2021 09:50 AM

    Sascha von der Heide's Avatar

    Super, vielen Dank so klappt es.
    Nein ich habe die Reihenfolge nicht verändert, zumindest kann ich mich nicht daran erinnern.

    Mit freundlichen Grüßen

  5. 5 Posted by Sascha von der ... on 20 Feb, 2021 03:14 PM

    Sascha von der Heide's Avatar

    Hallo,

    ich muss mich doch nochmal melden, jetzt habe ich gesehen das es ein neues Problem gibt.
    Am Laptop mit dem Safari und anderen Browsern kann ich die mobile Webseite aufrufen.
    Wenn ich das mit dem iPhone versuche, kommt die mobile Navigation nicht.

    Ich habe mal einen Screenshot angefügt.

    Mit freundlichen Grüßen

  6. 6 Posted by Sascha von der ... on 20 Feb, 2021 04:19 PM

    Sascha von der Heide's Avatar

    Ich habe den Fehler gefunden. Das Responsive CSS war nicht eingebunden. Was ich etwas merkwürdig finde, ich bin sicher das ich das nicht rausgenommen habe.
    Egal, die mobile Navigation läuft jetzt.

  7. Support Staff 7 Posted by RockSolid Theme... on 22 Feb, 2021 10:26 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    In den Layouteinstellungen muss das CSS-Framework „Responsives Layout“ nicht aktiviert werden.

    Ihre Fehlerbeschreibung deutet darauf hin, dass in den Einstellungen des Layouts unter „Experteneinstellungen › Viewport-Tag“ der Wert width=device-width,initial-scale=1.0,shrink-to-fit=no,viewport-fit=cover fehlt.

  8. 8 Posted by Sascha von der ... on 24 Feb, 2021 07:40 AM

    Sascha von der Heide's Avatar

    Moin,

    richtig - fragen sie mich nicht warum, ich habe die Einstellungen aus dem Layout entfernt. Aber dann nicht auf den Fehler kommen…. vielen Dank für Ihre Hilfe.
    Ich habe es wieder eingefügt und alles ist gut.

    Mit freundlichen Grüßen

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