サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-04-27 17:38
お世話になります。
表題の通りで、表示領域が1024px以下になったときに、モバイルメニューが表示されますが、グローバルナビとヘッダーロゴはそのまま表示されたままになります。
ワードブレスのcocoon設定▶︎モバイル設定で、サイトヘッダーロゴを表示するのチェックを外していますが、反映されません。※設定画面のプレビューでは反映されています。
キャッシュ削除して、何度かブラウザも変えて確認しましたが、解決できませんでした。
よろしくお願い申し上げます。
Topic starter
2020-04-27 17:41
補足情報として、添付画像のように表示されています。
この最上段のモバイルメニューは、モバイル表示画面サイズ(現状だと1024px)以下になれば出現し、それ以上大きい画面サイズでは表示されません。この挙動は正常だと思いますが、ヘッダーナビとヘッダーサイトロゴがそれに応じて消えないのは、どこの設定がよくないのでしょうか？
お手数をおかけいたしますが、ご教授いただけますとさいわいです。
2020-04-27 19:07
ちょっと、よくわからないのですが、Cocoon設定の「ヘッダー」タブの「ヘッダーレイアウト」を別のものに変えたりして試してみると、何かヒントが得られるでしょうか？
2020-04-27 19:26
もしかしたら、ロゴが上下で重複しちゃうから、どちらか消したいということでしょうか？
ある画面幅以下のときは、ヘッダーロゴを背景色と同じ色にしちゃうとか・・
例えばこんな風に・・
Topic starter
2020-04-27 19:39
ご返答ありがとうございます。
アイデアまでありがとうございます。
おっしゃる通り、ロゴが重複してしまうことが、気になっております。
他のヘッダーの設定にしても変わらずでした。
ネットでしらべる限り、設定でチェックマークを外せば消えそうな
書き方をしているところが多いのですが、今回うまく機能しないところです。
よろしくお願い申し上げます。
2020-04-27 19:44
Cocoon設定・モバイルタブで設定を変更すればイケると思うのでお試しください
チェックを外す感じ
サイトヘッダーロゴを表示する
モバイルでヘッダーロゴを表示するか。
This post was modified 4年前 by かうたっく
Topic starter
2020-04-27 19:52
かうたっく様
ご返答ありがとうございます。
そうなんです。それで謎にうまくいかないんです。
他に思い当たる確認事項などあればご教授いただけますと幸いです。
リフィトリー reacted
2020-04-27 19:52
そのようなトップメニューにしたときは、CSSセレクタの優先度が負けていたのが原因かもしれません。
該当部分を修正してみました。
以下のファイルでアップデートして試してみていただければ幸いです。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
リフィトリー reacted
Topic starter
2020-04-27 20:15
わいひら様
早々のご対応ありがとうございます。
マジでお疲れ様です。FTPで流し込もうとしましたら、うまくいかなかったので、
別の方法でも試してみます。親テーマのSTYLE.CSSだけでもアップデートすれば、
修正がかかる見込みでしょうか？ STYLE.CSSだけのアップデートでは、修正がかかっていませんでした。
お忙しいところ恐れ入りますが、ご教授いただきたく存じます。
よろしくお願い申し上げます。
Topic starter
2020-04-27 21:31
お世話になります。
アップロードいただいたStyle.cssで試しましたが、うまく反映されませんでした。
chromeでいじってみましたら、Style.cssの688に下記の赤字ぶち込んだら、狙い通りになりました。
『.header-container-in.hlt-top-menu .logo-header .site-name {
margin: 0;
display: none;
}』
これで834px以下のの画面幅時にヘッダーナビとモバイルナビの重複表示は解決されました。
ですが、1024pxから834pxの間の画面サイズ表示では、ヘッダーナビとモバイルナビがまだ重複表示されるので、
最低限のCSS修正で反映できる箇所見つけたら、ここに記述して解決済みにしようと思います。
ありがとうございます。よろしくお願い申し上げます。
2020-04-28 00:20
@yhira さん
1023px幅以下のメディアクエリで「9199行目」と「9235行目」の以下の記述が重複しているようです。
.no-mobile-sidebar .sidebar,
.mobile-button-fmb .go-to-top-button,
.no-mobile-header-logo .header .logo-header {
display: none;
}
恐らく、CSSの詳細度で他のセレクタに負けているので、「.header」を「#header」に変えて、
.no-mobile-sidebar .sidebar,
.mobile-button-fmb .go-to-top-button,
.no-mobile-header-logo #header .logo-header {
display: none;
}
こうしてみては、どうでしょう？
また、834px以下のメディアクエリで「9484行目」に以下の記述があるため、
.header-container-in.hlt-top-menu #header .header-in,
.header-container-in.hlt-top-menu #header .logo-text {
display: block;
height: 100%;
}
ブロック表示になってしまうようなので、それより下の行に、
.no-mobile-header-logo #header .logo-header {
display: none;
}
などを記述するのは、どうでしょうか？
これじゃ、詳細度でイマイチかな？
複数セレクタの方が強いのかな・・
他との兼ね合いもあるので、詳しいことは、私にはわからないのですが・・
2020-04-28 19:40
アップデートした内容が反映されていないような…。
本来なら、.no-mobile-header-logo .logo-headerが.no-mobile-header-logo .header .logo-headerになるはずなんですが。
2020-04-28 19:43
上手くアップデートできていない可能性が高いようですね。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。