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

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

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

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

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

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

モバイルナビを開いた状態

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

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

スクロール時

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

スマホでの表示

モバイルナビの先頭に SNS アイコンが表示されます。

サイトヘッダーに電話番号とお問い合わせボタンを配置した例

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

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

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

モバイルナビを開いた状態

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

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

スクロール時

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

スマホでの表示

モバイルナビの先頭に電話番号とお問い合わせボタンが表示されます。

SNS アイコンを表示してお問い合わせセクションをパソコンで使いたいときは

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

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

②以下の CSS を追加する。

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

サイトヘッダーを透過にできます

以下のようにトップページのサイトヘッダーを透過にすることができます。

以下のようにトップページ以外のページでサイトヘッダーを透過にすることもできます。