[ 解決済 ] モバイル(スマホ)でLightningのヘッダーを固定したいです。

VWSとは フォーラム Lightning [ 解決済 ] モバイル(スマホ)でLightningのヘッダーを固定したいです。

[ 解決済 ] モバイル(スマホ)でLightningのヘッダーを固定したいです。

  • このトピックには7件の返信、3人の参加者があり、最後にjoen1900により2年、 2ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #63685

    joen1900
    参加者

    ■ WordPress のバージョン
    WordPress 5.9.2

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning Pro

    ■ テーマのバージョン
    8.14.1

    ■ スキンの種類
    Origin II

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    モバイル(スマホ)で見たときにLightningのヘッダーを固定したいです。

    ■ 自分で試した事
    機能を探しましたが、わかりませんでした。

    ■ 症状が発生するブラウザ
    Chrome

    ■ 実際の症状
    モバイル(スマホ)でスクロールしたらLightningのヘッダーが移動してしまいます。


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #63686

    おそらく

    画面サイズが小さい場合 {
    ヘッダーのセレクタ {
    position:fixed;
    }
    html body {
    padding-top:モバイル時のヘッダーの高さ
    }
    }

    できる!CSSカスタマイズ

    みたいな内容のCSSを書けばできるのではないかなと思います。
    詳細は自分で試すか他の人の回答を…

    やってみてうまく出来なかったら、試したコードを貼り付けて再度質問してください。

    #63774

    joen1900
    参加者

    お世話になります。

    TOPページ



    指示通り
    @media screen and (min-width:480px) {
    .site-header {
    position: fixed;
    }
    html body {
    padding-top: 0px;
    }
    }
    で試しましたが
    モバイルでヘッダーは固定されませんでした。

    再度、ご回答の程宜しくお願い致します。

    #63775

    junon
    参加者

    サイト制作やパソコン指導をビジネスにされている方に対し、既知であり失礼な指摘かもしれませんが

    どのセレクタに対し。は別にして
    モバイル(スマホ)を、どのような横幅の場合と捉えられているのかわからないにしても、

    @media screen and (min-width:480px) {

    は480px以上のときに書くもので、
    480pxより幅の狭い場合は

    @media screen and (max-width:480px) {

    と書かないと、たいていの実機では効かないですね。

    • この返信は2年、 2ヶ月前にjunonが編集しました。
    #63805

    joen1900
    参加者

    お世話になります。

    TOPページ

    TOPページ


    ご指示通り

    @media only screen and (max-width: 480px)
    {
    .site-header {
    position: fixed;
    }
    }

    で試しましたが
    モバイルでヘッダーは固定されませんでした。

    再度、ご回答の程宜しくお願い致します。

    #63818

    junon
    参加者

    私は指摘しただけで指示はしていませんが
    サイトを確認すると
    480px以下をモバイル(スマホ)とするならば、
    今回の書き方で、.site-headerは固定され効いていますよ。

    あとは、
    非表示になっているものを表示させるとか、
    画面外で固定されているものを画面内で見えるように調整するとか、
    スクロール時を考慮に入れるとか、
    ご自身がやりたいことを、普段のサイト制作のように、該当classへCSSをあてれば良いと思います。

    #63823

    だいたいこんな感じだと思います。
    後は…健闘を期待します!

    @media ( max-width:991.99px ) {
    	.site-header{
    		position: fixed;
    	}
    	.header_scrolled.admin-bar .site-header{
    		top:var(--vk-size-admin-bar);
    	}
    	.header_scrolled .site-header-logo {
    		display: block;
    	}
    	.site-header + * {
    		margin-top:66px !important;
    	}
    }
    #63831

    joen1900
    参加者

    関係各位
    お世話になります。
    ご返信ありがとうございます。
    モバイルでヘッダーが固定できました。
    お忙しいところ、ご回答ありがとうございました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。