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

VWSとは フォーラム Lightning [ 質問者返信待ち ] スマホ表示でのヘッダーの固定について

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

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #67916

    伊藤文香
    参加者

    ■ 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;
    }
    }

    ——————-

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

    #67943

    うなこ
    モデレーター

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

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

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

    できる!CSSカスタマイズ

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

    横から失礼します。

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

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

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

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

    Attachments:
    You must be logged in to view attached files.
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。