モバイルでのヘッダーの変更を無効にする

モバイルでトピックの最上部にいるとき、ナビバー/ヘッダーにはメニューアイコンやその他の要素(カテゴリのスライダー/カルーセルを含む)が含まれます。

特定の「しきい値」を過ぎてスクロールするとトピック名が含まれるように変更されますが、それは私のフォーマットを壊します。この動作を無効にすることはできますか?常に同じヘッダーを希望します。

通常/良いヘッダー:

スクロール中/悪いヘッダー:

奇妙なのは、Chrome > Inspect を使用すると、異なる、そして好ましい動作が得られることです。

スクロール前:

スクロール後:

このコンポーネントがお役に立つと思います。

ハンバーガーメニューボタンが2つのスクリーンショットで同じ場所になく、2番目のケースではモバイルモードを使用していないのではないかと思われます。

URLに ?mobile_view=1 を追加することでモバイル表示を取得できます。そのため、スタイリングを改善し、タイトルの表示機能を引き続き活用することもできます。

「いいね!」 1

まさに私が求めていたものです。ありがとうございます!

Chrome のインスペクトパネルにアクセスして、モバイルビューを有効にするボタンをクリックしただけです。メニューが左にずれた理由は全く分かりません…
時々、そのビューはあまり正確ではないことに気づきました。
「?mobile_view=1」のヒントをありがとうございます。知りませんでした。
これを(そして元に戻すのに時間がかかったので)知らない人のために付け加えたいのですが、元に戻すには ?mobile_view=0 を追加するだけです。https://example.com?mobile_view=0 のように。

?mobile_view=1 オプションを使用すると、トピックのタイトルに切り替わるポイントで奇妙に動作しましたが、モバイルでは動作しませんでした。デスクトップブラウザを使用すると、何か奇妙なことがあるかもしれません。

私のスクリーンショットからわかるように、ヘッダーがめちゃくちゃになっていることに加えて、カテゴリのスライダーが完全に削除されています。

1 - ヘッダーの高さが適切に調整されないために発生していると思いますか?
2 - その変更が発生した場合にのみ適用される CSS を作成するにはどうすればよいですか?

@Moin あなたが共有したURLトリック(コンポーネントがインストールされていない状態)を使用してモバイルバージョンを検査したところ、トピックの先頭にいるときに次のように表示されます。

そしてスクロールすると、次のように表示されます。

したがって、class="wrap custom-categories-navbar" を持つ div が完全に削除されます。カテゴリ スライダーが消えるのを防ぐには、別のアプローチが必要なようです。

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.