SWELLはブレイクポイント959pxからのハンバーガーメニューが出るまでの間、ギリギリの960pxで表示が崩れることが多いです。
フォントを小さくするとか、メディアクエリを細かく入れるとかの対策は嫌なので、まずは余白をなんとかする方向で考えてみました。
さっさとなんとかしたい人向けです。
こちらをコピペすればOKです。
/* ヘッダー全体の左右の余白 */
@media (min-width: 960px) and (max-width: 1200px) {
:root {
--swl-pad_container: 16px;
}
}
/* ロゴ全体の右の余白 */
@media (min-width: 960px) {
.-series .l-header__logo {
margin-right: 0;
}
}
/* ロゴパーツの右の余白 */
@media (min-width: 960px) and (max-width: 1100px) {
.-series .c-headLogo {
margin-right: 0;
}
}
/* ヘッダー内部とメニューとの余白 */
.-series-right .w-header {
margin-left: 6px;
}
/* ヘッダー内部に残りの余白を使う */
.w-header.pc_ {
flex-shrink: 0;
}
960px付近のヘッダーメニューの表示崩れ対策をする
全体のフォントサイズを下げてもいいのですが、今回は余白を調整してみます。
左右の端のpaddingを減らす
デフォルトです。
@media (min-width: 960px) {
:root {
--swl-pad_container: 32px;
}
}となっているので、少し減らすと良いです。
@media (min-width: 960px) and (max-width: 1200px) {
:root {
--swl-pad_container: 16px;
}
}ちなみにデフォルトでは1200px以上から48pxtと左右の表示間隔が広がります。
@media (min-width: 1200px) {
:root {
--swl-pad_container: 48px;
}
}ロゴの右余白を減らす（2箇所）
デフォルトでmargin-right: 24px;の値が入っています。
@media (min-width: 960px) {
.-series .l-header__logo {
margin-right: 24px;
}
}メニューの表示にもよりますが、右寄せにしているならpaddingは0でも問題ないです。
@media (min-width: 960px) {
.-series .l-header__logo {
margin-right: 0;
}
}こちらも減らせそうなので減らします。
@media (min-width: 960px) {
.-series .c-headLogo {
margin-right: 16px;
}
}0にしました。
@media (min-width: 960px) and (max-width: 1100px) {
.-series .c-headLogo {
margin-right: 0;
}
}ヘッダー内部の要素にできる左の余白を調整する
ウィジェットのヘッダー内部にボタンを入れるとメニューとの間に余白ができます。
@media (min-width: 960px) {
.-series-right .w-header {
margin-left: 12px;
}
}削ります。
.-series-right .w-header {
margin-left: 0;
}調整するのはお勧めしない箇所
✖️メニューの左の余白は削らない
メニューの左側もautoとなっていて、少し減らせますが、右寄せが消えてしまうのでNG
@media (min-width: 960px) {
.-series-right .c-gnavWrap {
margin-left: auto;
}
}✖️メニュー同士の間隔を狭めない
タップしづらくなるので、あまりやりたくないのですが、メニュー同士の間隔を狭めることは可能です。
デフォルト
@media (max-width: 1080px) {
.c-gnav>.menu-item>a {
padding: 0 8px;
}
}今回はやめておきます。
削った結果
というような感じで削ると、画面幅960pxでもフォントのサイズを変えずにメニューが入りました。
最終的に調整したCSS
要するにこちらをコピペすればOKです。
/* ヘッダー全体の左右の余白 */
@media (min-width: 960px) and (max-width: 1200px) {
:root {
--swl-pad_container: 16px;
}
}
/* ロゴ全体の右の余白 */
@media (min-width: 960px) {
.-series .l-header__logo {
margin-right: 0;
}
}
/* ロゴパーツの右の余白 */
@media (min-width: 960px) and (max-width: 1100px) {
.-series .c-headLogo {
margin-right: 0;
}
}
/* ヘッダー内部とメニューとの余白 */
.-series-right .w-header {
margin-left: 6px;
}
/* ヘッダー内部に残りの余白を使う */
.w-header.pc_ {
flex-shrink: 0;
}キャッチフレーズも入れる場合
キャッチフレーズもある場合も、960pxでやはり崩れてしまいます。
しかしキャッチフレーズは折り返されるので、出来た残りの余白をボタン（ヘッダー内部のウィジェット）に集めれば良さそうです。
.w-header.pc_ {
flex-shrink: 0;
}最大幅を設定するのであれば、下記のように記載してもOKです。
.w-header.pc_ {
flex: 1;
max-width: 156px;
}なんとかヘッダーメニューおさまりました。
まとめ
めちゃめちゃマニアックな記事ですが…
SWELLの元々のCSSを調整すれば、ある程度のメニュー量でも崩れずに表示できます。