Menüleiste fixieren

Seit einiger Zeit setze ich auf verschiedenen Seiten ein sehr sinnvolles Plugin ein: Es fixiert die horizontale Menüleiste am oberen Rand, so dass man in jeder Scroll-Situation das Menü ohne Rückscrollen im Griff hat. Geht nicht nur für die horizontale Menüleiste sondern auch für jedes andere eindeutig identifizierbare Objekt. Hier das Plugin

Sticky Menu (or Anything!) on Scroll

Man kann es aber noch mit einem paar netten Zutaten versehen. Besonders beeindruckend ist es, wenn man mit einem bisschen Schatten einen leichten 3D-Effekt erzeugt, z. B. mit folgendem Style in der style.css

.cloned {
    box-shadow: 0 0 30px gray;
    transition-duration: 0.5s;
}
Möglicherweise vom Theme abhängig muss man dafür sorgen, dass das Menü nicht vom Administrationspanel im eingeloggten Zustand verdeckt wird:
.logged-in .cloned {
    top: 30px !important;
}
Mit einem bisschen CSS kann man auch eine wichtige Information aus dem  Header, z. B. die Telefonnummer, in die fixierte Menüleiste ziehen., wenn dort noch genügend Platz ist. Hier die beiden Situationen:
vor Fixierung der Menüleiste

vor Fixierung der Menüleiste

nach Fixierung der Menüleiste

nach Fixierung der Menüleiste

Hier der Code dazu:

.cloned > ul::after {
    color: blue;
    content: „Tel:030-74304784“;
    float: right;
    font-size: 1em;
    margin-top: 12px;
    max-width: 100px;
}