皆さん、こんにちは。
必要なフィールドにコードを追加しましたが、機能しませんでした。どこで間違っていますか？
プラグインも試しましたが、検索バーの部分が壊れてしまいます。
うーん、ヘッダーバーをリンクで機能させるには、追加のCSS作業が必要になると思います。
質問ですが、モバイルでも開発していますか？ モバイルのヘッダーは、要素を追加するためのスペースがずっと少ないです。デスクトップサイトをきれいに作っても、モバイル表示が乱雑になることに気づくだけではいけません。
すぐには思い出せませんが、そこにはプラグインのアウトレットがあるかもしれません。
リリーさん。
デスクトップのみでこれを実行したいと思います。
モバイルビューは現在問題なく、ヘッダー領域を狭めたくありません。
ちなみに、もしそれが実現しなくても、大した問題ではありません。このボタンはフォーラムのカテゴリにリダイレクトされます。
このボタンで雰囲気を出したかっただけです。
「いいね！」 1
この領域のアイコンのことですか？
具体的にどのようなものをお探しですか？
ここのプラグインのアウトレットは before-header-panel です。
これは Custom Header Links および Header Search コンポーネントで使用されます。
Custom Header Links がおすすめです！
Lilly が述べたように、ここで CSS を調整する必要があります。
私が見たところ、Header Links コンポーネントはアウトレットコンテナに一部 CSS を使用しており、それが検索を壊している理由かもしれません。
もしよろしければ、フォーラムを直接確認できるように、コンポーネントを再度有効にしていただけますか？
「いいね！」 4
ここに説明がありますが、必要なコードを書いても機能しません。
有効にしましたので、確認していただけます。ご協力ありがとうございます 
ありがとうございます！
このCSSを追加してみてください。
.floating-search-input-wrapper .floating-search-input {
margin: auto;
}
「いいね！」 1
匿名ユーザーにとっては正常に見えますが、ログインユーザーにとっては正常に見えません。原因は、検索バーを中央揃えするために使用したコードです。
ログインしており、期待どおりに表示されています。検索が中央に表示されているのがわかります。私のスクリーンショットをご覧ください。
「いいね！」 2
はい、ヘッダーパネルを補うために margin-right: -35px; を手動で追加しましたが、リンクにより値が再度調整される必要があります。
「いいね！」 2
ログインしたメンバーの場合、検索バーが左右に移動しないため、このようにしています。検索バーは、ログイン前とログイン後の両方で同じ場所にあります。
しかし、カスタムヘッダーリンクプラグインにも影響しているようです。今回はそこにボタンを設置しないことにします。CSSとHTMLで追加できるなら試してみたいです。
お時間をいただきありがとうございます。
「いいね！」 1
フローの外に検索バーを配置するには、絶対位置指定を使用することもできます。
margin は不要になります。
.floating-search-input-wrapper {
position: absolute;
left: 0;
top: calc((4em - 2.6rem - 2px - 2px) / 2); /* ヘッダーの高さ - 検索の高さ - マージン - ボーダー */
width: 100%;
}
低い解像度で幅を制御し、他の要素と重ならないようにするために、メディアクエリを追加する必要がある場合があります。
ありがとうございます。確認します。
しかし、カスタムヘッダーリンクを有効にすると、ヘッダーセクションが正常に表示されません。
これは大きな問題ではありません。ヘッダーセクションに視覚的な要素を追加したかっただけです。
@Arkshineさん、こんにちは。気づいたのですが、このコードの後、ロゴがクリックできなくなりました。
position: absolute; のコードに関連していると思います。
ロゴを検索の上に重ねるには、そのCSSを追加できます。
.home-logo-wrapper-outlet {
z-index: 1;
}
サイドの処理を避けるために、CSS floating-search-input の別の解決策もあります（floating-search-input-wrapper のCSSを削除することを忘れないでください）：
.floating-search-input {
position: absolute;
left: 0;
transform: translateX(calc(50vw - (33rem / 2)));
}
Arkshineさん、本当にありがとうございます