ヘッダー位置をオーバーレイにした時のスマホサイズでの表示について

10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #42522
    TarCoon☆CarToon
    参加者
    7

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】
    【お使いのブラウザ】Safari 13.0.4 iOS 13 Safari
    【当該サイトのURL】https://tarcoon.me

    ===

    デザインカスタマイズでヘッダー位置をオーバーレイにした時に
    スマホサイズでの表示するとスクロールをすると、
    ヘッダー固定されません。

    これを固定して表示する方法を教えてください。
    ヘッダーのハンバーガーメニューが常に表示されている状態にしておきたいです。

    0
    #42524
    TarCoon☆CarToon
    参加者
    7

    スノーモンキー のバージョンは9です。

    0
    #42527
    キタジマ タカシ
    キーマスター
    339

    オーバーレイ(上部固定)を選択してみてください!

    0
    #42659
    TarCoon☆CarToon
    参加者
    7

    ありがとうございます。

    オーバーレイ(上部固定)にすれば、スマホサイズでスクロールをすると、
    ヘッダー固定は固定になりますが、

    オーバーレイ(上部固定)ではなくオーバーレイを使っていたのは、
    PCでスクロールさせた時に、シンプルなメニューだけの表示が上部からドロップダウンしてくると思います。

     

    ▽オーバーレイ表示

     

    ▽オーバーレイスクロールするとドロップダウンでシンプルなメニュー

    この表示がとても気に入っていたのでオーバーレイに設定していました。

    PCではこの表示を生かしたまま、
    スマホサイズでは、(オーバーレイ固定表示)にできないものでしょうか?

     

    もしくは、これはカスタマイズに関する質問というよりも、要望になるかもしれませんが、
    PCとタブレット、スマホでヘッダーのデザインカスタマイズを切り替えれたらとても助かります。

    よろしくお願いいたします。

    0
    #42751
    キタジマ タカシ
    キーマスター
    339

    PCとタブレット、スマホでヘッダーのデザインカスタマイズを切り替えれたらとても助かります。

    なるほど、これができるようになれば

    この表示がとても気に入っていたのでオーバーレイに設定していました。

    PCではこの表示を生かしたまま、
    スマホサイズでは、(オーバーレイ固定表示)にできないものでしょうか?

    が実現できますね。v9 でヘッダーの設計を見直したので、そのような組み合わせにすること自体は可能になっています。ただ、これまでは、基本のヘッダー位置と、PC ではノーマルにする、の組み合わせだけだったので、「PC ではノーマルにする」を「PC 用ヘッダー位置」として拡張したときに、後方互換性的に影響がでないか(v8 でヘッダー位置を設定していた人が全然意図していなかったヘッダー位置になってしまわないか)をテストする必要があるかなと思います。

    ちょっとできそうかどうかテストしてみますね。

    0
    #43711
    キタジマ タカシ
    キーマスター
    339

    v9 正式版で、「スマホ/タブレット」と「PC」それぞれで別々のヘッダー位置設定をおこなえるようにしました。
    カスタマイザー → デザイン → ヘッダーと進んで設定してみてください!

    0
    #43811
    TarCoon☆CarToon
    参加者
    7

    早速対応ありがとうございました。
    とても嬉しいです!

    更にもう一点お伺いしたいのですが、
    「スマホ/タブレット」のヘッダーを『オーバーレイ(上部固定 / スクロール時背景白)』に設定しているのですが、このスクロール時背景白を半透明の白にしたいのですが、

    追加CSSでのどの様に記述すればいいか教えてください。
    よろしくお願いいたします

    0
    #43898
    キタジマ タカシ
    キーマスター
    339

    これでどうでしょう?

    @media (max-width: 639px) {
      [data-scrolled=true] .l-header--sticky-overlay-colored-sm {
        background-color: rgba(255, 255, 255, 0.9);
      }
    }
    0
    #43904
    TarCoon☆CarToon
    参加者
    7

    助かりました!

    思い通りの結果となりましたので閉じさせていただきます!
    本当にありがとうございます!

    0
    #42553
    TarCoon☆CarToon
    参加者
    7

    なぜオーバーレイに設定しているかというと背景透過の透明オーバーレイにしたいからです。
    ですので、オーバーレイで使っています。

    PCサイズではヘッダーの背景も透明になり、スクロールすればメニューだけのシンプルな表示になるのが気に入っています。

     

    ▽PCヘッダー

    ▽PCヘッダースクロール

    PCではこの表示でよいのです。
    問題はスマホサイズの表示にした時にスクロールしたら流れていってしまう。

    ▽スマホサイズ表示

    ▽スマホサイズ表示スクロール

     

    キタジマサンのおっしゃる通り、スマホの問題は解決するのですが、オーバーレイ(上部固定)にしてしまうと今度は、PCでの表示で、メニューだけのシンプル表示が出なくなってしまうのです。

    ▽これも出したい

    PCでのオーバーレイ(スクロール時の縮小メニュー)とスマホ上でのオーバーレイ(上部固定)両方活かせる方法はないものでしょうか?

    0
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「ヘッダー位置をオーバーレイにした時のスマホサイズでの表示について」には新しい返信をつけることはできません。