Wie man die Kopfzeilenhöhe richtig erhöht?

Unterstützung
1

Hallo,

ich möchte die Höhe des Headers erhöhen:
image

um ein größeres Logo anzeigen zu können (der Header behält auf Mobilgeräten die Standardhöhe bei).

Ich habe einige Versuche unternommen, aber es nicht geschafft, da das Erhöhen der Höhe (und des oberen Randes des darunterliegenden Inhalts, damit der Header ihn nicht durch seine erhöhte Höhe verdeckt) dazu führte, dass die „Sticky“-Funktion gestört wurde. Das Scrollen wurde blockiert oder der Inhalt „sprang“ hin und her.

Gibt es einen richtigen Weg, die Header-Höhe zu erhöhen, ohne etwas zu beschädigen?

2

Hast du versucht, anzupassen

#main-outlet {
    padding-top: 5.8572em;
}

Zum Beispiel

.d-header {
    height: 8em;
}
#main-outlet {
    padding-top: 9.8572em;
}

844×427 13.8 KB

836×377 16 KB

3

Ja, habe ich. Ich sollte noch ergänzen, dass ich den Header etwa doppelt so hoch wie die ursprüngliche Höhe haben möchte, aber die Standardhöhe beibehalten, wenn er fixiert ist (was möglicherweise das Hauptproblem ist).

4

Na, ich habe es doch geschafft.
Ich bin mir nicht sicher, warum ich auf solche Blockierungsprobleme gestoßen bin… Es gibt immer noch ein wenig Springen, aber das sind nur ein paar Pixel, sodass man es nicht sieht, wenn man nicht versucht, extrem langsam zu scrollen.
Ich habe zudem benutzerdefinierte Inhalte über dem Header, was möglicherweise eine Rolle bei dem von mir erlebten Problem gespielt hat.