グローバルナビの上に電話番号と問い合わせボタンを追加した例②

前回（昨日）に続き、Lightning のグローバルナビの上に電話番号と問い合わせボタンを追加するカスタマイズを行いました。

ページの先頭を表示しているとき

前回のカスタマイズではコンパクトなヘッダーにしていましたが、今回のカスタマイズはグローバルナビをコンテナ幅にしてヘッダーロゴ画像の下に配置した余裕のあるヘッダーレイアウトになっています。

スクロール時にもページ上部に電話番号とお問い合わせボタンが表示されます。この動きは有料版にはないオリジナル仕様です😊

この投稿でカスタマイズを行ってありますので、いま表示されている画面で実際の動きをご確認ください。

画面幅が992px未満の端末ではモバイルナビで表示することを想定して、ヘッダーに電話番号とボタンが表示されない仕様にしてあります。

私はいままでに同様のカスタマイズをいろんなやり方で行ってきました。例えば、こちらの投稿で行ったカスタマイズではアクションフックを使ってヘッダーロゴ画像の後にウィジェットエリアを追加して、VK All in One Expansion Unit のお問い合わせセクションを表示しています。

上記のカスタマイズを行ったサイトで VK All in One Expansion Unit のアップデートの影響を受けて電話番号と問い合わせボタンのレイアウトがずれてしまい、CSS で修正したことがあります。

今回この投稿で行ったカスタマイズではフックを使わずに CSS だけで電話番号とお問い合わせボタンを実装していますので、プラグインなどのアップデートの影響を受けづらくなっていると思います。

下記の範囲内でグローバルナビのメニューを作成するのが安全です。

スクロール時に電話番号と問い合わせボタンを表示しなくてもよければ、この制約は大幅に緩和されます。

この範囲を超えるとレイアウトがくずれる可能性があります。

文字数を減らせばメニューの数を増やすことは可能です。

上記は最上位のメニューについての制約事項です。サブメニューにはこの制約はありません。