グローバルナビを最上部ではハンバーガーメニュー、スクロール開始でオーバーレイ（上部固定/背景白）にしたい

♥ 0

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

このトピックには2件の返信、2人の参加者があり、最後にakosanにより1年、 4ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2023年6月29日 1:23 AM #127157

akosan
参加者

♥ 31

【お使いの Snow Monkey のバージョン】バージョン: 20.4.1
【お使いの Snow Monkey Blocks のバージョン】バージョン 19.9.0
【お使いの Snow Monkey Editor のバージョン】バージョン 9.2.5
【お使いのブラウザ】chrome
【当該サイトのURL】https://gojiai.info/_lib/

### 実現したいこと

TOPページのみ、グローバルナビを最上部ではハンバーガーメニュー、スクロール開始でオーバーレイ（上部固定/背景白）にしたい

### 発生している問題

表示できない

### 試したこと

過去フォーラム参照

TOPページのみハンバーガーメニューにする方法はこちらで質問して可能になりました。

TOPページのみハンバーガーメニュー、その他のページは通常のナビゲーションを表示させたい

このトピックには2件の返信、2人の参加者があり、最後にakosanにより3ヶ月、 1週前に更新されました。 3…

snow-monkey.2inc.org

例えば、

・オーバレイ型メニューの一番右にハンバーガーを配置

・最上部ではCSSでメニュー部分を消しハンバーガーのみ表示させる

・スクロールしたらCSSで[data-scrolled=true]を使い消したメニュー部分を表示させる

等いろいろ考えたのですが、もっと良い解決方がありましたら教えて頂きたいと思っています。
※難しいなら諦めます

♥ 0

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

2023年6月29日 3:06 PM #127224
キタジマタカシ
参加者

♥ 2421
CSS で調整するのが一番簡単かなぁと思いますので、とりあえずトップページを「オーバーレイ（上部固定/背景白）」になるようにしてもらって、下記の CSS を追加してみてください。
```
/* 1024px 以上のとき */
@media (min-width: 1024px) {
    /* 最後から2番目がグローバルナビゲーション。非スクロール + トップページのときは強制的に消す */
    [data-scrolled="false"] .home.page .l-1row-header .c-row__col:nth-last-child(2) {
        display: none !important;
    }
    /* 最後がハンバーガーボタン。非スクロール + トップページのときは強制的に表示する */
    [data-scrolled="false"] .home.page .l-1row-header .c-row__col:last-child {
        display: block !important;
    }
}
```
♥ 1

いいねをした人:
2023年6月30日 4:15 PM #127288

akosan
参加者

♥ 31

キタジマさん

ありがとうございます、無事に実現できました。

いつもありがとうございます。

♥ 1

いいねをした人:
投稿者

投稿