[勝山俊輔]

【お使いの Snow Monkey のバージョン】   15.14.3
【お使いの Snow Monkey Blocks のバージョン】13.2.0
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】 Chrome
【当該サイトのURL】リリース前のため共有できません

### 実現したいこと

1180以下でハンバーガメニューの出現

（ブレイクポイントの変更）

### 発生している問題

ハンバーガーメニューの出現ポイントを変更したい

タグ: ハンバーガー このトピックには6件の返信、2人の参加者があり、最後に土居 安佳里により3年前…

snow-monkey.2inc.org

以前のフォーラムでの記事を参考に追加CSSを書いて試したが、1180px以下でハンバーガーメニューが出現しない。

### 試したこと

以下、追加CSSに追記しました。

@media (max-width:73.75em) {
　　.u-invisible-md-down {
　　　　position: absolute!important; clip:rect(1px,1px,1px,1px) !important;
　　　　speak: none!important;
　　　　visibility: hidden!important;
　　}
}

@media (min-width: 73.75em) {
　　.u-invisible-lg-up {
　　　　position: static !important;
　　　　clip: auto !important;
　　　　speak: normal !important;
　　　　visibility: visible !important;
　　}
}

ブレイクポイントを変更するために、既存のブレイクポイントを打ち消すために以下を追記しました。

639px以下のメディアクエリ

.u-invisible-lg-up {
　　position: absolute !important;
　　clip: rect(1px,1px,1px,1px) !important;
　　speak: none !important;
　　visibility: hidden;
}

1,023以下のメディアクエリ

.u-invisible-lg-up {
　　position: absolute !important;
　　clip: rect(1px,1px,1px,1px) !important;
　　speak: none !important;
　　visibility: hidden;
}

以上、お手数をおかけいたしますが、ご教示のほど、よろしくお願いします。

♥ 0

いいねをした人: 居ません

[GONSY]

こんにちは。

こういうことで合ってますか？

/* デフォルトでは、1024px(64em)からグローバルナビゲーションが表示されるので、 1179px（73.6875em）まで表示させないようにする */
@media (min-width: 64em) and (max-width: 73.6875em) {
	.u-invisible-md-down {
		display: none!important;
	}
}

/* グローバルナビゲーションを表示させたいブレークポイントが1180px（73.75em）なので、その手前（1179px（73.6875em））まではハンバーガーメニューを表示する */
@media (max-width:73.6875em ) {
	.u-invisible-lg-up {
		display: block!important;
	}
}

♥ 3

いいねをした人:

[勝山俊輔]

GONSYさん

ご回答ありがとうございましたm(_ _)m

今、追記CSSに入力したらできました。

 

勉強になりました。

ありがとうございましたm(_ _)m

♥ 1

いいねをした人:

[キタジマ タカシ]

ブレイクポイントの変更は結構ややこしいので、もしヘッダーのブレイクポイントだけ調整したいということであれば、オリジナルのヘッダーを追加して自分で CSS を書くほうが良いかもしれません。

snow-monkey/templates/layout/header/ の中にある現在使用しているヘッダーレイアウトのファイルをコピーし、子テーマをつくり、子テーマの templates/layout/header/ の中にそのファイルをコピペします。そしてそのファイルのファイル名と、コード中の Name: xxx の部分を適当な名前に変更すると、カスタマイザー → デザイン → ヘッダーでそのヘッダーレイアウトを選択できるようになります。あとはそのファイルを適当に書き換えて最適なブレイクポイントになるように HTML と CSS を書けば OK です。

♥ 2

いいねをした人:

[勝山俊輔]

キタジマ様

ご回答ありがとうございますm(_ _)m

教えていただいた内容は、自分自身でヘッダーレイアウトを作る形になるんですね。

こちらもやってみたいと思います。

ありがとうございました。

十分な解答をいただきましたので、こちらのトピックを閉じさせていただきます。

♥ 1

いいねをした人:

[投稿者]

投稿