Horizon のヘッダーは、モバイルとデスクトップの両方で、ほとんどの場合非常にうまく機能しています：
ただし、私には奇妙なアスペクト比を持つ折りたたみスマートフォンがあります。残念ながら、検索バーとアバターが消えてしまい、全体が少し乱れてしまいます：
これは幅 640〜767px の範囲で発生しているようです。残念ながら、私の折りたたみ機はこの範囲に該当してしまいます！
私もこれを再現できます。問題は、折りたたみ式スマートフォンや小型タブレットのビューポートサイズ @media (min-width: 640px) and (max-width: 767px) で、ヘッダー内の contents クラスが flex を表示している点のようです:
この幅の範囲でプロパティを contents に変更することで修正できます:
@media (min-width: 640px) and (max-width: 767.98px) {
.d-header>wrap .contents {
display: contents!important;
}
}
Discourse はタブレットとデスクトップの境界に 768px を使用していると思います。
でも、その設定にするとむしろ悪化するんです！！オフにすると、デバイスがモバイルと指定されていない限り、767px までのすべてのサイズでヘッダーが崩れてしまいます。
でも、折りたたみスマホには都合が良いですね。ただ、画面が小さくなるとデスクトップブラウザでは困ってしまいます。
この設定は現在消えているようなので、ワークアラウンドはもはや存在しません。
Horizon での問題は依然として残っています。
これを診断するのを手伝ってほしい。現在、デスクトップシミュレーターで再現を試みている（折りたたみ式スマホを持っていない）が、異常なところは何も見当たらないのだ。
あー、再現用にはそれを使えるんだっけ！って、MetaのHorizonでも私には再現しないね。
ってことは、私のサイト側の問題かな。私の側でトラブルシューティングして、結果を報告するね。調べてくれてありがとう！！！
わあ、問題を見つけるのが予想より簡単でした。
このテーマコンポーネントは Horizon と互換性がありません：
そして私はこの TC が大好きです！！モバイルでメニューが右にジャンプするのがどうしても気に入りません。私たち（少なくとも一部の人間）を狂わせるのは、こうした小さなことなんですよね？もしかしたら、左利きなので左側にあったほうが気に入るのかもしれません。
うん、よくわかります。
元々の Horizon Theme のトピックにメッセージを残してみてください。そこでは次のように書いています：
私もそのコンポーネントを使っています（サイドバーのアイコンについては同じ気持ちですが、Horizonは好きでも使ってもいません）。そのコンポーネントの修正作業もしてきました。Nathan、修正できるか見てみます。
ねえ、ネイサン、ここに修正方法があります：
リリー、最高！折りたたみ式の端末で、左側のハンバーガーと『Horizon』を同時に楽しんでいます。
素晴らしい！！！