ヘッダーの高さを適切に増やす方法

こんにちは。
ヘッダーの高さを増やしたいと考えています:
image
より大きなロゴを表示するためです(モバイルではヘッダーはデフォルトの高さを維持します)。

いくつか試してみましたが、高さを増やす(そしてヘッダーが増えた高さでコンテンツを覆わないように、その下のコンテンツの上部マージンも調整する)と、スティッキー機能が不具合を起こしてしまいました。スクロールができなくなったり、コンテンツが「ジャンプ」したりします。

何かを壊すことなく、ヘッダーの高さを適切に増やす方法はありませんか?

調整を試みましたか?

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

例えば

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

はい、その通りです。ヘッダーの高さを元の約2倍にし、スティッキー状態のときはデフォルトの高さを保ちたいと考えています(これが主な問題かもしれません)。

なんとかできました。
なぜこのようなブロックの問題に遭遇したのかはわかりません…少しジャンプする現象は残っていますが、数ピクセル程度なので、極めてゆっくりとスクロールしようとしていない限りは目立ちません。
また、ヘッダーの上にカスタムコンテンツを追加しているため、それが問題の原因に関与した可能性もあります。