Astra Theme: Praktische Tipps für Header, Scroll-Top-Button und Responsive Design

Du nutzt das beliebte Astra WordPress-Theme und möchtest wissen, wie du das Design deines Headers, den Scroll-Top-Button und das responsive Verhalten anpassen kannst? In diesem Blogartikel zeige ich dir praxisnah, wie du mit einfachen CSS-Anpassungen und Einstellungen das Beste aus deinem Astra-Theme herausholst – damit deine Webseite auf Desktop und Mobilgeräten toll aussieht und gut bedienbar bleibt.

---

1. Hintergrundfarbe und Schriftgröße des Scroll-Top-Buttons anpassen

Der Scroll-Top-Button ist eine praktische Funktion, die deinen Besuchern das schnelle Zurückscrollen nach oben erleichtert. Astra bietet dir die Möglichkeit, das Aussehen dieses Buttons individuell zu gestalten.

So änderst du die Hintergrundfarbe und Schriftgröße

• Nutze die CSS-Variable --ast-global-color-0, um die Hintergrundfarbe konsistent mit deinem Farbdesign zu gestalten.
• Setze die Schriftgröße auf 15px, damit der Button gut sichtbar, aber nicht zu groß ist.

css

#ast-scroll-top {

  background-color: var(--ast-global-color-0);

  font-size: 15px;

}

Responsive Anpassung für das Pfeilsymbol

Damit das Pfeilsymbol im Scroll-Top-Button auf kleineren Bildschirmen (max. 921px Breite) optimal skaliert, kannst du die SVG-Größe anpassen:

css

@media (max-width: 921px) {

  #ast-scroll-top .ast-icon.icon-arrow svg {

    width: 1em;

  }

}

---

2. Padding und Höhe für Header-Inhalte optimieren

Der Header ist das Aushängeschild deiner Webseite. Astra teilt den Header in mobile und Desktop-Version auf, die du individuell anpassen kannst.

Praktische CSS-Anpassungen für Header-Inhalte

• Sorge für ausreichend vertikalen Abstand (Padding) und automatische Höhe, damit Texte und Icons nicht gequetscht wirken.
• Erhöhe das Padding oben beim ersten Kind und unten beim letzten Kind innerhalb der Header-Bereiche.

css

.ast-mobile-header-content > ,

.ast-desktop-header-content >  {

  padding: 10px 0;

  height: auto;

}



.ast-mobile-header-content > :first-child,

.ast-desktop-header-content > :first-child {

  padding-top: 10px;

}



.ast-mobile-header-content > :last-child,

.ast-desktop-header-content > :last-child {

  padding-bottom: 0;

}

---

3. Suchfeld und Menü-Icons anpassen

Ein gut sichtbares Suchfeld und klare Menü-Icons sind besonders auf mobilen Geräten wichtig.

Suchfeld volle Breite geben

css

.ast-mobile-header-content .ast-search-menu-icon.ast-inline-search label,

.ast-desktop-header-content .ast-search-menu-icon.ast-inline-search label {

  width: 100%;

}

Menü-Icons und Untermenüs

• Drehe das Menü-Toggle-Symbol bei geöffnetem Untermenü (für bessere Orientierung).
• Verstecke oder zeige Header-Bereiche abhängig vom Menü-Zustand.

css

.ast-desktop-header-content .main-header-bar-navigation .ast-submenu-expanded > .ast-menu-toggle::before {

  transform: rotateX(180deg);

}



#ast-desktop-header .ast-desktop-header-content,

.ast-mobile-header-content .ast-search-icon,

.ast-desktop-header-content .ast-search-icon,

.ast-mobile-header-wrap .ast-mobile-header-content,

.ast-main-header-nav-open.ast-popup-nav-open .ast-mobile-header-wrap .ast-mobile-header-content,

.ast-main-header-nav-open.ast-popup-nav-open .ast-desktop-header-content {

  display: none;

}



.ast-main-header-nav-open.ast-header-break-point #ast-desktop-header .ast-desktop-header-content,

.ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {

  display: block;

}

---

4. Menü-Animationen und Sichtbarkeit von Untermenüs

Astra bietet verschiedene Menü-Animationen, die du mit CSS steuern kannst, um Untermenüs sichtbar und flüssig erscheinen zu lassen.

css

.ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-up > .menu-item > .sub-menu,

.ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-up > .menu-item .menu-item > .sub-menu,

.ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-down > .menu-item > .sub-menu,

.ast-desktop .ast-desktop-header-content .astra-menu-animation-slide-down > .menu-item .menu-item > .sub-menu,

.ast-desktop .ast-desktop-header-content .astra-menu-animation-fade > .menu-item > .sub-menu,

.ast-desktop .ast-desktop-header-content .astra-menu-animation-fade > .menu-item .menu-item > .sub-menu {

  opacity: 1;

  visibility: visible;

}

---

5. Responsive Anpassungen für Header und mobile Menüs

Damit deine Seite auch auf kleineren Bildschirmen gut aussieht und bedienbar bleibt, solltest du die Header-Höhe und die Abstände anpassen.

Beispiel: Header-Höhe anpassen

css

.ast-mobile-header-wrap .ast-primary-header-bar,

.ast-primary-header-bar .site-primary-header-wrap {

  min-height: 100px;

}



@media (max-width: 921px) {

  .ast-mobile-header-wrap .ast-primary-header-bar,

  .ast-primary-header-bar .site-primary-header-wrap {

    min-height: 90px;

  }

}



@media (max-width: 544px) {

  .ast-mobile-header-wrap .ast-primary-header-bar,

  .ast-primary-header-bar .site-primary-header-wrap {

    min-height: 80px;

  }

}

Menü-Padding für mobile Untermenüs

css

.ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation ul .sub-menu .menu-link {

  padding-left: 30px;

}



.ast-hfb-header.ast-default-menu-enable.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content .main-header-bar-navigation .sub-menu .menu-item .menu-item .menu-link {

  padding-left: 40px;

}

---

6. Tipps für die Praxis

• Teste deine Änderungen immer auf verschiedenen Geräten und Bildschirmgrößen. So stellst du sicher, dass alles gut aussieht und funktioniert.
• Nutze ein Child-Theme oder den Customizer mit eigenem CSS, um deine Anpassungen update-sicher zu machen.
• Wenn du Probleme hast, etwa mit dem Sticky Header oder der Sichtbarkeit von Elementen, helfen Plugins oder kleine CSS-Tricks weiter – hier findest du gute Anleitungen für Sticky Header im Astra-Theme[1],[2].

---

Fazit: Das Wichtigste auf einen Blick

Mit gezielten CSS-Anpassungen kannst du das Astra-Theme flexibel an deine Wünsche anpassen – vom Scroll-Top-Button bis zum responsiven Header. So wird deine Webseite nicht nur schöner, sondern auch benutzerfreundlicher auf allen Geräten.

---

Wenn du noch Fragen hast oder Unterstützung brauchst, lohnt sich immer ein Blick in die Astra-Dokumentation oder der Austausch in WordPress-Foren. Viel Erfolg beim Optimieren deiner Seite!