[ 解決済 ] モバイル（スマホ）でLightningのヘッダーを固定したいです。
[ 解決済 ] モバイル（スマホ）でLightningのヘッダーを固定したいです。
- このトピックには7件の返信、3人の参加者があり、最後に
により2年、 7ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
WordPress 5.9.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning Pro■ テーマのバージョン
8.14.1■ スキンの種類
Origin II■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
モバイル（スマホ）で見たときにLightningのヘッダーを固定したいです。■ 自分で試した事
機能を探しましたが、わかりませんでした。■ 症状が発生するブラウザ
Chrome■ 実際の症状
モバイル（スマホ）でスクロールしたらLightningのヘッダーが移動してしまいます。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
おそらく
画面サイズが小さい場合 { ヘッダーのセレクタ { position:fixed; } html body { padding-top:モバイル時のヘッダーの高さ } }みたいな内容のCSSを書けばできるのではないかなと思います。
詳細は自分で試すか他の人の回答を…やってみてうまく出来なかったら、試したコードを貼り付けて再度質問してください。
お世話になります。
で
指示通り
@media screen and (min-width:480px) {
.site-header {
position: fixed;
}
html body {
padding-top: 0px;
}
}
で試しましたが
モバイルでヘッダーは固定されませんでした。再度、ご回答の程宜しくお願い致します。
お世話になります。
TOPページ
で
ご指示通り@media only screen and (max-width: 480px)
{
.site-header {
position: fixed;
}
}で試しましたが
モバイルでヘッダーは固定されませんでした。再度、ご回答の程宜しくお願い致します。
私は指摘しただけで指示はしていませんが
サイトを確認すると
480px以下をモバイル（スマホ）とするならば、
今回の書き方で、.site-headerは固定され効いていますよ。あとは、
非表示になっているものを表示させるとか、
画面外で固定されているものを画面内で見えるように調整するとか、
スクロール時を考慮に入れるとか、
ご自身がやりたいことを、普段のサイト制作のように、該当classへCSSをあてれば良いと思います。だいたいこんな感じだと思います。
後は…健闘を期待します！@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; } }
- このトピックに返信するにはログインが必要です。
