Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スマホで表示されるグローバルメニューを...
 
共有:
通知
すべてクリア

[解決済] スマホで表示されるグローバルメニューを横一列のスクロール方式から、3列2行で表示されるようにしたいです。

11投稿
3ユーザー
17Likes
107表示
saa
 saa
(@saa)
Active Member Registered
結合: 3か月前
投稿: 5
Topic starter  

相談内容:お世話になります。

ただ今seasonのテーマを使用しているのですが、初期の設定でグローバルメニューが横にスクロールするデザインとなっています。

とても良いデザインなのですが、メニューを増やすにあたって、一目でメニューの把握ができるよう全てのメニューを表示させたいと考えています。

<今のナビゲーションメニューの見た目>

[ホーム][おすすめ][みかん][スイカ]・・・(スクロールをすることで右部分が表示される)

<希望するナビゲーションメニューの見た目>

[ホーム][おすすめ][みかん]

[スイカ] [メロン]  [りんご]

 

分かりづらくてすみませんが、どの部分のコードをどのように変更したら良いかご教授いただけないでしょうか。

 

解決のために試したこと:インターネットの検索で方法や参考にできそうなコードを調べましたが、グローバルメニューをスクロール式にする方法は出てきますが、スクロール式から普通の(今目指しているもの)形式にする方法を見つけることができませんでした。

私自身プログラミングに詳しくなく、初めての質問なのでうまくできているか分かりませんが、よろしくお願いいたします。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

前略、saaさん

スキンのseasonのデザインみたいなので、CSSでカスタマイズしないといけないのかもしれません。

追加CSSか子テーマのCSSファイルに以下を追記ではいかがかと。

 

@media screen and (max-width: 1023px) {
  .navi-in > .menu-mobile {
    overflow-x: visible;
    white-space: normal;
    justify-content: center;
    flex-wrap: wrap;
  }
}



@media screen and (max-width: 834px) {
  #navi .navi-in > .menu-mobile li {
    width: 50%;
    height: 40px;
    line-height: 40px;
  }
}

 

ちょっと適当なので、どこか間違っているかもしれません。

 


   
わいひら and saa reacted
saa
 saa
(@saa)
Active Member Registered
結合: 3か月前
投稿: 5
Topic starter  

@leafytree

ご返信をありがとうございます。

コードをご提示いただき、大変ありがたく思います‼︎

浅学で申し訳ないのですが、既存のグローバルメニューのコードを消したりはせず、追加して大丈夫でしょうか。

ぜひ追加させていただこうと思います。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@saa さん

既存のコードは何も触る必要はありません。

 

子テーマのCSSファイルの一番下に追記するか、「追加CSS」に何も記述していないようでしたら、そちらでも良いような気もします。

 


   
わいひら and saa reacted
chu-ya
(@chu-ya)
Prominent Member Registered
結合: 6か月前
投稿: 498
 

●補足

3列2行で表示されるようにしたいです。

上記コードを以下に修正して下さい。
メニューを3列にするなら、width: 50%;→33%
またメニューを左寄せなら、justify-content: center;→start

 


リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@saa さん

子テーマはお使いですよね?

カスタマイズする場合は必ず子テーマで行ってください。


   
わいひら and saa reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@saa さん

親テーマ、子テーマって何?

という場合は以下が参考になるかと思います。

 

Cocoonテーマをインストールする方法

https://wp-cocoon.com/theme-install/

[解決済] 親テーマと子テーマについてです。

https://wp-cocoon.com/community/postid/34811/


   
わいひら and saa reacted
saa
 saa
(@saa)
Active Member Registered
結合: 3か月前
投稿: 5
Topic starter  

@leafytree

ご教授いただいた通りに追加してみたところ、まさしく理想の形にすることができました!!

本当にありがとうございます。

夜分でしたが親切に教えてくださり、ありがとうございました。

また何かありましたら、ぜひよろしくお願いいたします。


リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 4年前
投稿: 6837
 

@chu-ya さん

「2行3列」の方だったようです。

「3列2行」なら、@chu-ya さんご案内の内容かもしれません。

あ、いや違うか・・ ? 

だんだんこんがらがってきた・・・

This post was modified 3か月前 2回 by リフィトリー

   
わいひら and saa reacted
saa
 saa
(@saa)
Active Member Registered
結合: 3か月前
投稿: 5
Topic starter  

@chu-ya

ご返信とご教授をいただき、誠にありがとうございます。

お陰様で理想とする3列2行にすることができました‼︎

コードを自分で入力することが初めてでしたので、理想通りにカスタマイズすることができ、感動しております。

夜分ですが、御助言をいただき本当に感謝いたします。

今後ともぜひよろしくお願いいたします。


   
わいひら reacted
saa
 saa
(@saa)
Active Member Registered
結合: 3か月前
投稿: 5
Topic starter  

リフィトリー様、chu-ya様

この度は、ご返信とご教授いただき、本当にありがとうございました!

無事解決することができました。

本当に感謝いたします。

暑くなりましたので、ご自愛ください。

この度は、ありがとうございました。


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。