- このトピックには9件の返信、2人の参加者があり、最後に
により4年、 7ヶ月前に更新されました。
-
投稿
-
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの Snow Monkey のバージョン】
【お使いのブラウザ】Safari 13.0.4 iOS 13 Safari
【当該サイトのURL】https://tarcoon.me===
デザインカスタマイズでヘッダー位置をオーバーレイにした時に
スマホサイズでの表示するとスクロールをすると、
ヘッダー固定されません。これを固定して表示する方法を教えてください。
ヘッダーのハンバーガーメニューが常に表示されている状態にしておきたいです。いいねをした人: 居ませんありがとうございます。
オーバーレイ（上部固定）にすれば、スマホサイズでスクロールをすると、
ヘッダー固定は固定になりますが、オーバーレイ（上部固定）ではなくオーバーレイを使っていたのは、
PCでスクロールさせた時に、シンプルなメニューだけの表示が上部からドロップダウンしてくると思います。▽オーバーレイ表示
▽オーバーレイスクロールするとドロップダウンでシンプルなメニュー
この表示がとても気に入っていたのでオーバーレイに設定していました。
PCではこの表示を生かしたまま、
スマホサイズでは、（オーバーレイ固定表示）にできないものでしょうか？もしくは、これはカスタマイズに関する質問というよりも、要望になるかもしれませんが、
PCとタブレット、スマホでヘッダーのデザインカスタマイズを切り替えれたらとても助かります。よろしくお願いいたします。
いいねをした人: 居ませんPCとタブレット、スマホでヘッダーのデザインカスタマイズを切り替えれたらとても助かります。
なるほど、これができるようになれば
この表示がとても気に入っていたのでオーバーレイに設定していました。
PCではこの表示を生かしたまま、
スマホサイズでは、（オーバーレイ固定表示）にできないものでしょうか？が実現できますね。v9 でヘッダーの設計を見直したので、そのような組み合わせにすること自体は可能になっています。ただ、これまでは、基本のヘッダー位置と、PC ではノーマルにする、の組み合わせだけだったので、「PC ではノーマルにする」を「PC 用ヘッダー位置」として拡張したときに、後方互換性的に影響がでないか（v8 でヘッダー位置を設定していた人が全然意図していなかったヘッダー位置になってしまわないか）をテストする必要があるかなと思います。
ちょっとできそうかどうかテストしてみますね。
いいねをした人: 居ませんv9 正式版で、「スマホ/タブレット」と「PC」それぞれで別々のヘッダー位置設定をおこなえるようにしました。
カスタマイザー → デザイン → ヘッダーと進んで設定してみてください！いいねをした人: 居ません早速対応ありがとうございました。
とても嬉しいです！更にもう一点お伺いしたいのですが、
「スマホ/タブレット」のヘッダーを『オーバーレイ（上部固定 / スクロール時背景白）』に設定しているのですが、このスクロール時背景白を半透明の白にしたいのですが、追加CSSでのどの様に記述すればいいか教えてください。
よろしくお願いいたしますいいねをした人: 居ませんこれでどうでしょう？
@media (max-width: 639px) { [data-scrolled=true] .l-header--sticky-overlay-colored-sm { background-color: rgba(255, 255, 255, 0.9); } }いいねをした人: 居ませんなぜオーバーレイに設定しているかというと背景透過の透明オーバーレイにしたいからです。
ですので、オーバーレイで使っています。PCサイズではヘッダーの背景も透明になり、スクロールすればメニューだけのシンプルな表示になるのが気に入っています。
▽PCヘッダー
▽PCヘッダースクロール
PCではこの表示でよいのです。
問題はスマホサイズの表示にした時にスクロールしたら流れていってしまう。▽スマホサイズ表示
▽スマホサイズ表示スクロール
キタジマサンのおっしゃる通り、スマホの問題は解決するのですが、オーバーレイ（上部固定）にしてしまうと今度は、PCでの表示で、メニューだけのシンプル表示が出なくなってしまうのです。
▽これも出したい
PCでのオーバーレイ（スクロール時の縮小メニュー）とスマホ上でのオーバーレイ（上部固定）両方活かせる方法はないものでしょうか？
いいねをした人: 居ません
- トピック「ヘッダー位置をオーバーレイにした時のスマホサイズでの表示について」には新しい返信をつけることはできません。