【Cocoon】モバイル画面にヘッダーメニューを表示する方法

Cocoonでモバイル画面に下記のようなヘッダーメニューを表示したい要望があると思います。

「Cocoon設定 → モバイル」と「外観 → メニュー」を設定することでモバイル画面にヘッダーメニューを表示することができます。

この記事ではCocoonでモバイル画面にヘッダーメニューをご紹介します。

モバイルにヘッダメニューを表示するための設定

Cocoon設定のモバイルを開きます。

モバイルメニューの「ヘッダーモバイルボタン」にチェックを入れます。

するとモバイル画面にヘッダーメニューが表示されます。

表示のあり・なしの違いは下記の通りです。

ボタンを表示しない	ヘッダーモバイルボタン

※ すでにヘッダーメニューを作成している方はこちらの設定は不要です。

Cocoonの設定だけだと「ホーム」のアイコンが表示されるだけなので、

ハンバーガーメニューが表示されるようにする必要があります。

左側からメニューに追加したいものを選択して、「メニューに追加」を押します。

すると右側にメニューをして表示されるものとして追加されます。

ここでは「カテゴリー(エンジニア・書籍・ブログ)」と「固定ページ(プロフィール)」を追加しました。

そして「メニューを保存」を押すと、モバイルでもメニューが表示されるようになります！

こちらはモバイル画面の表示のオプションの設定になります。

ヘッダーメニューの表示とは関係ないので、興味ある方は参考にしてみてください。

スクロールした際にヘッダーメニューを固定表示するかしないかの設定です。

固定表示する	固定表示しない

モバイルでヘッダーロゴを表示するかしないかの設定です。

本ブログの場合は「shungo blog」が重複するので表示なしにしています。

ロゴを表示する	ロゴを表示しない

PC画面のときに右側にあるサイドバーの表示をコンテンツ下に表示するかしないかの設定です。

表示する	表示しない