【サイトヘッダー】⑨ モバイルナビをパソコンでも＋ SNS / お問い合わせ

パソコンでもサイトヘッダーにモバイルナビを表示します。標準デザインのグローバルナビの位置には以下のどちらかを配置して使うことを前提とした仕様になっています。

デモサイトで実物をご覧いただけます。

仕様の詳細については下記説明をご覧ください。

モバイルナビの仕様について

このページで説明されているサイトヘッダーをお使いになる場合、モバイルナビに以下の制限があります。

サイトヘッダーに SNS アイコンを配置した例

SNS アイコンの色はカスタムカラー 1、MENU ボタンの色はキーカラーが設定されます。

使用できるアイコンは Font Awesome です。

モバイルナビの背景色と電話アイコンの色はキーカラー、お問い合わせボタンの色はカスタムカラー 1 が設定されます。

モバイルナビにアイコンを表示することができます。使用できるアイコンは Font Awesome です。

スクロール時にもヘッダーロゴ画像が表示されます。

MENU ボタンの色と電話アイコンの色はキーカラー、お問い合わせボタンの色はカスタムカラー 1 が設定されます。

電話番号とお問い合わせボタンは VK All in One Expansion Unit の連絡先情報が設定されます。営業時間は表示されません。

モバイルナビの背景色はキーカラーが設定されます。

パソコンではモバイルナビに電話番号とお問い合わせボタンが表示されません。スマホでは表示されます。

スクロール時にもヘッダーロゴ画像が表示されます。

サイトヘッダーに SNS アイコンを表示して、お問い合わせセクションをパソコンのモバイルナビで使いたいときは以下のように設定してください。

①ウィジェット編集画面で、お問い合わせセクションの [Set telephone and mail form vertically] にチェックをつける。

②以下の CSS を追加する。

body .vk-mobile-nav .veu_contentAddSection {
    display: block;
}