1枚目

2枚目

ChromeデベロッパーツールのiPadで確認してみました。崩れた様子を確認できません。

Safariで確認されてるのでしょうか？

どこがどのように崩れているか教えていただけますか？

• 該当部分のキャプチャともに書き込んでいただけると助かります

3枚目。

i-pad 画面で右側が隙間が空いています。chromeでもsafariでも再現できると思います。

その状態で、下へスクロールして、どこかその幅よりはみ出してる部分はありますか？

よくあるのが広告とか、プラグインの何かだったりします。

下へスクロールし、はみ出した何かがあれば、そのスクショとそこに設定しているモノが何かを教えてください。

その機種を持ってない誰もが分かるよう、スクショもお願いします。

※そこに設定しているモノが原因です。プラグインであれば、停止すれば問題ないと思います。

※もしくはiPadの仕様？なのか、別の原因なのかも知れません。

調べましたがはみ出しているものは特になさそうです。
chromeでipad表示でも再現されています。（左にずらせば）

プラグインなどではみ出している様子はないです。

1024だと起こるので原因が不明です。

バージョン: 1.5.9より以前のバージョンでも見ていましたが同じ現象はなかったです。

原因は分かりませんが、こちらの環境ではヘッダーメニュー→その他のサブメニューが溢れているように見えます。

トップへ戻るボタンがカラムからはみ出てるの原因っぽいですね

何が原因でそうなっているのかは分かりませんが…

みなさまありがとうございます。

原因がわかりました。

グローバルナビが一つ多いことで上記の様な症状が出ていた様です。

一つ項目を減らすことで解決されました。わいひらさんももしデザインで修正が可能でしたらお願いします。

ヘッダーメニュー→その他のサブメニューが溢れているように見えます。

それでしたら今現在、780pxくらいから1000px強の横幅で横揺れすると思います。

その横揺れする部分だけご確認いただいて、サブメニューを右へ出せば横揺れは収まると思います。

https://bibabosi-rizumu.com/cocoon-navi-ko-cat-left/

サブメニューを置いてる場所によって、横揺れする幅があるんじゃないか！？って思うんですよね。

人それぞれメニューを置く場所が違うんで、どうしようもないかな。って思ったりです。

それは、サブメニューをアニメーションさせるためにそのような仕様になっています。
アニメーションさせないスタイルを書けば、そのような表示にならないようにもできます（display none;で制御）。

また、以下のスタイルシートを書くと余白はできなくなります。

.container {
  overflow: hidden;
}

ただこの方法を使うと、サイドバーが追従しなくなる難点があります。

COLORSスキンを利用する場合は、一番右側のメニューにサブメニューを使わないのが一番いいのかもしれません。

ただ、当サイトも使っちゃってますが。

今そちらの環境のスタイルを以下のようにしたら、はみ出しはしませんでした。

ただキレイでもないと思います ? 

@media screen and (min-width: 769px) {
	.navi-in>ul .sub-menu {
		min-width: 0;
	}
}

どれも、一長一短ですね。
あちらが立てば、こちらが立たずみたいな感じで。
何か難点もなくズバッと解決出来るいい方法はないもんだろうか。

一番右側のメニューにサブメニューを使わないのが一番いいのかもしれません。

ただ、当サイトも使っちゃってますが。

素人考えで恐縮ですが、左側に展開するってのはいかがでしょう？

https://thx.jp/spread-sub-menu-to-left-side-on-global-navi/

チラりずむ中です。

一番右側のメニューにサブメニューを使わないのが一番いいのかもしれません。

ただ、当サイトも使っちゃってますが。

素人考えで恐縮ですが、左側に展開するってのはいかがでしょう？

全て左に展開して左側に孫メニューを置いてると、左側がズレる可能性はないのかな？と思います。

ユーザーさんのメニューの置きかた・使いかたによって変わるので難しいと思ったり。

一番右にサブメニューを置かずに、右から2番目に置いた場合でも、アクセスされたPC・タブレット・スマホの横幅（縦・ヨコにした場合）によっては右にはみだしたりすると思います。

スマホの機種によって横幅・縦幅が増えてるのもあるのと、ユーザーさんのメニューの数やサブメニューの位置など色々考えたら、簡単なスタイル指定だけでキビシイとと。

メディアクエリで各自調整するか、10個メニューがある場合で文字列が長め・短め。且つ何個目にサブメニューがあるか。など自由度が高すぎるので、テーマ側で調整するのは難しい気もしたり。

※ただ自分で調整するのも難しいなども。

あと、スマホのスタイルに関係ない場合は、できたらPCのみスタイルを反映させておきたかったりで。※AMPにも影響するので。って蛇足程度に思ったりします。

素人考えで恐縮ですが、左側に展開するってのはいかがでしょう？

最後のサブメニューだけ左側に展開するというのは、最も現実的な解決方法かもしれません（※右に展開、右に展開…ときて左に展開となるのでちょっと違和感はあるかもしれませんが）。

とりあえず、COLORSテーマに反映させてみました。

https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

当サイトにも適用してみました。
読者はそこまで細かいところは気にしませんし、はみ出すよりはいいかなと。

なるほど。展開はそのままで、位置を右揃えにする。

確かにこれで十分ですね。違和感もそれほどありませんし。

読者はそこまで細かいところは気にしませんし、はみ出すよりはいいかなと。

ですね＾＾

ご確認ありがとうございます。
今回は、最も難点が目立たない解決方法を考えていただき感謝です ?