Sticky Header für TwentyTwenty WordPress Theme

Unglaublich aber wahr, ein sticky Header ist standardmäßig nicht vorgesehen im WordPress Theme TwentyTwenty.

Verwunderlich auch deshalb, weil das selbst in den simpelsten Themes bereits im Customizer mit einem Klick ausgewählt werden kann.

Was ist ein Sticky Header

Ein Sticky Header, bedeutet das der Header, bzw. die Menüleiste nicht mitscrollt wenn man die Seite scrollt. Das ermöglicht zu immer auf das Menü Zugriff zu haben, auch wenn man bis ganz nach unten gescrollt hat.

Um trotzdem einen Sticky Header bzw. ein Sticky Menü zu haben kann. man. entweder ein Plugin verwenden, oder mit wenigen Zeilen CSS code Anpassungen machen.

Dafür benötigt man nur wenige CSS Kenntnisse – ehrlich gesagt muss man einfach nur den hier bereitgestellten Code kopieren und einfügen. Allerdings sollte man das mindestens schon einmal gemacht haben.

CSS Code für Sticky Header in TwentyTwenty WP Theme

Der Code kann ganz einfach im Customizer unter dem Menüpunkt: CSS Anpassungen per Copy & Paste eingefügt werden.


/*  STICKY HEADER */
.header-inner.section-inner {
    background: #fff;
    height: 100px;
    z-index: 170;
    padding: 16px;
    max-width: 100%;
    /* margin: 10px; */
    /* padding: 30px; */
    /* border-bottom: 1px solid #7a7a7a; */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
}

/* - STAPELN IMPORTANT */
.stapel_hinten {
	z-index:-1;
}

Mehr zu TwentyTwenty dem neuen Standard Theme von WordPress gibt es hier