デモサイト https://wsp-demo07.hp1.work/ で実物をご覧いただけます。
グローバルナビの仕様について
このページで説明されているサイトヘッダーをお使いになる場合、下記の範囲内でグローバルナビのメニューを作成していただくようお願いいたします。
- メニューの数は最大4つまで
- メニューの項目の文字数は最大6文字まで
この範囲を超えるとレイアウトがくずれる可能性があります。ご了承ください。
上記は最上位のメニューについての制約事項です。サブメニューにはこの制約はありません。
- ヘッダーに検索窓を設置してあります。
- ヘッダーの背景色にキーカラーを設定してあります。
- アイコンを表示する前提のデザインです。使用できるアイコンは Font Awesome です。
- メニュー項目の背景色はキーカラーを濃くしたものが設定されています。
- マウスホバーでアイコンが回転します。
ページ先頭を表示しているとき
キーカラー #1c71a6
![ページ先頭を表示しているとき](https://wsp-demo01.hp1.work/wp-content/uploads/2023/08/wsp-site-header-customize-7-1.png)
検索窓を開いた状態
検索窓の背景色はキーカラーを濃くしたものが設定されています。
![検索窓を開いた状態](https://wsp-demo01.hp1.work/wp-content/uploads/2023/08/wsp-site-header-customize-7-2.png)
サブメニューを開いた状態
サブメニューの背景色はキーカラーを濃くしたものが設定されています。
![サブメニューを開いた状態](https://wsp-demo01.hp1.work/wp-content/uploads/2023/08/wsp-site-header-customize-7-3.png)
スクロール時
スクロール時も検索窓を使うことができます。
![スクロール時](https://wsp-demo01.hp1.work/wp-content/uploads/2023/08/wsp-site-header-customize-7-4.png)
サイトヘッダーを透過にできます
以下のようにトップページのサイトヘッダーを透過にすることができます。
![トップページのサイトヘッダーを透過にすることができます](https://wsp.uonuma-js.com/wp-content/uploads/2024/06/site-header-trans-09.webp)
以下のようにトップページ以外のページでサイトヘッダーを透過にすることもできます。
![トップページ以外のページでサイトヘッダーを透過にすることもできます](https://wsp.uonuma-js.com/wp-content/uploads/2024/06/site-header-trans-10.webp)