[ 質問者返信待ち ] スマホ表示でのヘッダーの固定について

[伊藤文香]

■ WordPress のバージョン
バージョン6.0.1

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

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 14.23.1

■ Pro Unit のバージョン
バージョン 0.22.2

■ スキンの種類
Evergreen

■ スキンのバージョン
バージョン 0.1.5

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

■ 期待する動作
スマホ・タブレットでのヘッダーの固定

■ 自分で試した事
CSSの入力

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

■ 実際の症状
スマホ・タブレットでのヘッダーの固定（下部固定ではなく、上部に固定）をしたいのですが、CSSを入力しても固定がされませんでした。
※ハンバーガーメニューは固定されています。

試したCSSは以下の通りです。どれも反映されませんでした。

——————-

#header{
position:fixed !important;
}

#site-header{
position:fixed;
}
@media (max-width: 991.98px){
.site-header-container {
display: block;
overflow: hidden;
position: fixed;
}
}

——————-

スマホ・タブレットでヘッダーを上部に固定するには、どのようにすればいいでしょうか。

[うなこ]

完全な回答ではないかもしれませんが、以下のような形でしょうか？

@media (max-width: 991.98px){
/* スクロール時に表示 */
.header_scrolled .site-header-logo, .header_scrolled .vk-campaign-text {
    display: block;
}
/* ロゴを固定 */
.site-header-container{
    position:fixed;
}
}

cssのカスタマイズは、こちらにわかりやすくのっておりますので、よければご確認ください

できる！CSSカスタマイズ

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

[対馬 俊彦]

横から失礼します。

下部固定ではなく、上部に固定

とのことなので、ご質問者が上部に固定したいのは モバイル固定ナビ のことでしょうか？

添付画像をご参照ください。

もし、モバイル固定ナビのことだとすると、上部に固定するのはけっこう大変な気がします。

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿