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

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

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

グローバルナビの上に電話番号とお問い合わせボタンが表示されます。

有料プラグイン Lightning G3 Pro Unit を使えばこれに近いヘッダーのデザインにできますが、有料版はナビ貫通のレイアウトになりグローバルナビの幅が大きくなりますので、このカスタマイズをコンパクトなヘッダーをご希望のお客様に提供させていただくくために用意しています。

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

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

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

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

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

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

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

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

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

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