Emanon Proでは、スマホからサイトを見た場合、グローバルメニューの表示デザインが自動でハンバーガーメニューに変更されます。

さらにオプションで、ハンバーガーメニューの下に横スクロール対応のモバイルメニューを表示することも可能です。

mobile-02

モバイルメニューの表示設定

WordPress管理画面 > 外観 > カスタマイズ > ヘッダー設定 > グローバルナビをクリックすると、下記画面が表示されます。

モバイルナビ

「モバイルメニューの表示」が有効化であることを確認してください。

「右スクロールアイコン(モバイルメニュー用)の表示」は、モバイルメニューが右側にスクロールすることを示すアイコンです。

スクロールアイコン

モバイルメニューの表示件数が少なく、右側にスクロールしない場合、「右スクロールアイコン(モバイルメニュー用)の表示」を無効にしてください。

モバイルメニューの設定

WordPressの管理画面から、外観 > メニューをクリックします。

新規メニューを作成をクリックすると下記内容が表示されます。

モバイルナビ

メニューの名前には、任意の名称(例 モバイルメニューなど)を入れ、「メニューを作成ボタン」をクリックします。

左のカラム(「固定ページ」・「投稿」・「カスタムリンク」・「カテゴリー」)からメニューに表示したいページを選択し「メニューに追加ボタン」をクリックします。

メニューの表示順序を変更したい場合、項目をドラッグして表示したい位置に移動させることができます。

最後にメニュー設定でモバイルメニュー(サブメニュー不可)をチェックします。

モバイルメニューに関する注意事項

モバイルメニュー(サブメニュー不可)は、サブメニュー(階層メニュー)に対応していません(下記図の赤枠を参照)。サブメニュー(階層メニュー)付きのメニューを指定すると、正しく表示されませんのでご注意ください。

サブメニュー