グローバルナビが複数ある場合の、
スマホへの並べかた編です。
メニューが4っつくらいの場合、
上下で2メニュー2行で並び、バランスがよいものの…
メニュー メニュー
メニュー メニュー
ちなみに偶数個並ぶのは、Cocoonの仕様なようです。
5項目だとこんなふうに3行になってしまい、、💧
メニュー メニュー
メニュー メニュー
メニュー
5メニューでも、
せめて2行くらいに収めるには、、？
調べてみると、
Cocoonのフォーラムにヒントがありました。
モバイルのヘッダーメニューを一列にしたい
はじめまして。Simplicity2からコクーンに変更させいただきました。いつもお世話になっております。 知識が乏しく、いくつかわからないことがあるのですが、まずはひとつずつ解決しようと思います。 モバイル(iPhoneからクローム)でみた...
Cocoon
ありがとうございます。
これで上手く設置できてると思います😚
ｽﾊﾞﾗｼｨ~
管理画面の外観 ⇨ カスタマイズから入り、
追加CSSに以下のコードを入力します。
/*モバイルグローバルメニュー*/
@media screen and (max-width: 768px) {
#navi .navi-in > .menu-mobile li {
width: 33%;
}
#navi .navi-in > .menu-mobile li a {
font-size: 13px; /*場合によってフォントサイズを小さく*/
}
}
もしこの追加CSS欄からコードを入力しエラーになるとき…
も一つの手段として、、
管理画面の外観 ⇨ テーマファイルエディターをクリックすると。
スタイルシートの記述ができるようになってます。
そこの“834px以下”へ、コードを記入してみてください。
入力後はファイルを更新で保存します。
ですが、これは推奨じゃありませんで、、
あくまで臨時用とお考えください。
基本はカスタマイズの追加CSSにて。。。
プライバシーポリシーなど、長い語句は略されてますね、、
でもスマホのサイズなので仕方なし。
それでも、
伝わらない語句じゃないのでOKだと思います。
このバランスなら
スマートではないでしょか👍
コメント