Horizonテーマのバグ:カテゴリ見出しコンテナがトピックリストで固定される

皆さん、こんにちは

カテゴリに画像、アイコン、絵文字を追加すると、category-heading がスクロールダウン時に固定され、多くのスペースを占有します。

CleanShot 2025-10-31 at 14.03.16

カテゴリヘッダーのテーマコンポーネントも影響を受けています。以下を参照してください。

「いいね!」 3

はい、それは厄介な副作用であることに同意します。

残念ながら、その解決策はありません。カテゴリヘッダーはナビゲーションと同じスティッキー要素内にあり、スティッキーはflex要素内では機能しないため、スティッキープロパティを1レベル下に移動することはできません。

モバイルではCSSを使用してロゴを非表示または最小化することをお勧めします。

「いいね!」 1

スティッキーナビゲーションも邪魔です。スペースを取りすぎます。

これをオフにするにはどうすればよいですか?

それに対する設定はありません。CSSを上書きする必要があります。

Horizonテーマには、トピックリストをスクロールしている間もカテゴリの説明が表示されたままになるという便利な機能があります。

これはデスクトップでは素晴らしいのですが、スペースが限られている場合(例:モバイル)、トピックリストが読みにくくなります(特にテキストがかなり長い場合)。

「いいね!」 2

これは、ナビゲーションを表示させておきたいという意図の意図しない副作用です。修正できるかどうかはわかりません(両方の要素が同じコンテナ内にあるなどの理由で? :thinking: )。もし選ばなければならないとしたら、元の意図のままにします。

もし誰か見てくれる人がいるなら、遠慮なくどうぞ。

「いいね!」 1

CSSで解決しました。

/* モバイル版での Horizon の固定リストコントロールを無効化 */
@media (max-width: 767px) {
  .list-controls {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }
}
「いいね!」 3

それはモバイルで説明文とナビゲーションの両方を「固定解除」することになりませんか?

説明文は消えて、ナビゲーションは固定されたままにしてほしいのです。

「いいね!」 2

ナビゲーションもスペースをとりすぎていました。

現在はスクロール可能なピル型ナビゲーションの導入を検討しています。

これをステickyにしたいと考えていますが、まだ実現できていません。

「いいね!」 1

はい、残念ながら CSS のみでこれを実現するにはレイアウトの再構成が必要となり、単純な方法はありません。

現在の Horizon テーマでは、カテゴリーヘッダーを含む .list-controls コンテナ全体がスティッキー(固定)になっています。親要素のスクリロールコンテキスト内で固定されるため、子要素である .navigation-container 単独をスティッキーにすることはできません。

この領域の構造を変更することも可能ですが、既存の構造に基づいてスタイルを適用しているすべてのテーマに影響を与える変更です。そのため、このようなスティッキーなナビゲーションを持っていないテーマやカスタマイズであっても、回帰(不具合)が発生する可能性が十分にあります。

「いいね!」 1

では、この問題の今後の対応方針はどうすべきでしょうか。

Horizon において、カテゴリ説明をモバイル版で非表示にするべきではないかと考えています。そもそも情報が重複しており、スペースも非常に限られているためです。

これは TC の「Mobile」タブで、以下の簡単な CSS を追加することで実現しました。

.category-heading.--has-logo {
    display: none;
}

これを Horizon に含めるべきかもしれません。

あなたがすでに道筋を示してくれましたね:カスタム CSS を使ってご自身の好みに調整してください :+1:

「いいね!」 1

はい、でもこの場合は私の好みの問題ではなく、テーマ全体の課題です。モバイルデバイスで大きな固定カテゴリ説明を「好きだ」と感じる人がいるとはとても想像できません。デザインにおいては、そのような意図は当初からなかったと思います。

「いいね!」 1

コミュニティで人々が何を求めているかは、本当に予測できません。現状のままにしておくことにしました。必要であれば簡単に非表示にできるため、「なぜカテゴリのバナーがモバイル表示されないのか」という混乱を招く可能性を避ける方が、道筋として明確だからです。

ホスティングプラン(無料プランなど)で、管理者がカスタム CSS を追加できない場合、どうすればよいでしょうか?

もし本当にそれを望む人がいるなら(私は疑っていますが)、テーマ設定で制御できるようにすることは可能でしょうか?

「いいね!」 1