【Cocoon】モバイルメニューを横並びにしてスクロール可能にするCSSカスタマイズ（β版）

このサイトをスマホ表示すると、上部グローバルメニューが横にスクローラブルになっています。

というわけでこれの実装方法を書いておきます。

Cocoonのモバイルメニューを横並びスクロール可能に。

下記CSSを子テーマstyle.css（「外観」→「テーマを編集」内の、子テーマのスタイルシート（style.css））に書いてください。

@media screen and (max-width: 480px){
	/* モバイルトップメニュー */
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}
}

なぜかやたらwhite-space: nowrap;が入ったりしていますが、これは試行錯誤の痕だということでそっとしておいてあげてください（消しても動くかもしれません）。

課題

スクロール可能であることを明示的に示す方法がないので、読者の想像力に依拠するしかありません。

こう、jQueryとかで限界までスクロールすると消える「»」をフローティング表示させられればいいのですが……、研究中です。

【支援お待ちしております！】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）

継続的な更新・サポートのためにご支援お願いいたします……！

▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！

サイトに掲載するCSSカスタマイズの支援をお待ちしています！

今後の記事執筆の励みになります！を支援のおかえしとして受け取ることができます。

polca.jp

その他のカスタマイズは下記ボタンから。