このサイトをスマホ表示すると、上部グローバルメニューが横にスクローラブルになっています。
というわけでこれの実装方法を書いておきます。
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とかで限界までスクロールすると消える「»」をフローティング表示させられればいいのですが……、研究中です。
有料テーマに見劣らない!Cocoonで各要素がふわっとフェードインしてくれる簡単CSSカスタマイズを応用して、左から右へフェードインするようにメニュー全体をアニメーションさせれば明示させらるかも。
【支援お待ちしております!】
当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)
継続的な更新・サポートのためにご支援お願いいたします……!
▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています!
今後の記事執筆の励みになります!を支援のおかえしとして受け取ることができます。
その他のカスタマイズは下記ボタンから。
コメント
お世話になります。
Cocoonのカスタマイズで検索した後にこちらのサイトへたどり着きました。
カスタマイズの見出しはとても興味深いのですが、「なにが」「どうなるか」が少々分かり辛いと感じます。
>このサイトをスマホ表示すると、上部グローバルメニューが横にスクローラブルになっています。
bifo-afterの画像があると、ユーザーにとって分かりやすいと思う次第です。
とても良い記事を書いていらっしゃると思いますので、一意見として受け止めて頂ければと思います。
今後の更新を楽しみにしています。