Support » Allgemeine Fragen » Abstand ÜBER dem Header/Menü verkleinern

  • Gelöst annenerenz

    (@annenerenz)


    Hallo,

    ich finde leider keinen CSS-Code, wie ich den Abstand über dem Menüband verkleinern kann. Unter dem Menü den Abstand zum ersten Block zu verkleinern hat geklappt. Mit welchem Code kann ich den Abstand vom Menü zum Seitenrand verkleinern? Ich möchte die Startseite auf einer „Computerseite“ darstellen und das ist nach oben so viel verschwendeter Platz.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Moderator Bego Mario Garde

    (@pixolin)

    „… und wie alt ist der Kapitän?“

    So ähnlich enden doch Fragen, die man nicht beantworten kann, weil wesentliche Informationen fehlen? (Nennt sich übrigens Kapitänssyndrom.)

    Nein, im Ernst – so ganz ohne Infos zur Website können wir deine Frage kaum beantworten. Wir wissen nicht, welches Theme du nutzt, haben keine URL um uns das anzuschauen und der Website-Bericht fehlt auch.

    Thread-Starter annenerenz

    (@annenerenz)

    Ich nutze das Theme Twenty-Twenty One. Einen Link kann ich nicht hinzufügen, da es sich um eine Firmenseite handelt, welche vor Fertigstellung nicht gesehen werden soll. Ich dachte es gibt vielleicht einen allgemeinen CSS-Code, der das regeln kann.

    Moderator Bego Mario Garde

    (@pixolin)

    Eine Universallösung gibt es nicht, weil sich die Themes zu sehr voneinander unterscheiden.

    Das Theme Twenty Twenty-One sieht keine Einstellungsmöglichkeit im Customizer für den Abstand oberhalb des Headers vor. Du kannst das also nur mit einer eigenen CSS-Regel einrichten, die du im Customizer unter Zusätzliches CSS einträgst, sinngemäß so etwas wie

    .site-header {
      margin-top: 200px; /* Wert bitte anpassen */
    }

    Der Header bekommt außerdem über das Stylesheet des Themes einen Innenabstand zugewiesen, der je nach Display-Größe unterschiedlich ausfällt:

      @media only screen and (min-width: 822px) {
    .site-header {
      padding-top: calc(2.4 * var(--global--spacing-vertical));
    }
    }
      @media only screen and (min-width: 482px) {
    .site-header {
      padding-top: calc(var(--global--spacing-vertical) / 0.75);
    }
    }

    Diese Werte kannst du auch mit eigenen CSS-Regeln anpassen.

    Rasch noch der obligatorische Hinweis, dass wir hier eigentlich keine Grundlagen in HTML, CSS, PHP, JavaScript usw. vermitteln möchten und auch nicht auf Zuruf CSS-Regeln zur Verfügung stellen. Ich habe hier eine Ausnahme gemacht, aus der andere Anwender/-innen aber keine Ansprüche ableiten sollten.

    Thread-Starter annenerenz

    (@annenerenz)

    Danke, das hat geklappt

    Moderator Bego Mario Garde

    (@pixolin)

    Danke für die Rückmeldung und viel Erfolg mit der Website.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „Abstand ÜBER dem Header/Menü verkleinern“ ist für neue Antworten geschlossen.