wordpressのテーマastraのヘッダーを固定したい。

Question

現在、Wordpress、テーマとしてAstraを使ってページを作成しております。
また、ページの作成にあたっては、プラグインのElementorを使用しております。

ヘッダーのメニューを、画面をスクロールしてもいつも上部に表示されるように
固定化するようにしたいのですが、プラグインで「Sticky Menu＆Sticky Header」というものがありまして、こちらを使用するとヘッダー固定はされるのですが、レスポンシブ時にヘッダーの幅が広いまま横に広がってしまいます。
参考にしたサイト
何か別の方法を探しています。
ちなみに、子テーマでheaderごとcssで固定させようとしても無理でした。

Answer 1

解決策が2通りあります。

➀　気にしない。

「レスポンシブ時にヘッダーの幅が広いまま」

とありますが、おそらく以下の順のような操作をされたのではないかと思います。

1. PC版の幅でサイトを表示した。
2. 開発者ツール、もしくはウィンドウの幅を狭めて、スマホ版の幅にしてレイアウトを確認した。

この場合、後述しますが本プラグインの仕様上、レイアウトが崩れます。
しかし、初めからスマホ版の幅で表示を行えば、スマホ版の幅でヘッダーの固定がされ、スクロールしても問題なくヘッダーが固定された状態になります。第3者がホームページを閲覧する際は、わざわざ幅を変えて見ようという人は少ないと思われますので、特段何もせず放置しても大きな支障はないかと思います。

②　プラグインのソースを修正する。
それでも気になる場合は、プラグインの修正とCSSの追加で現象の解決が可能です。
このプラグインは、仕様上”サイトを初めに表示したときの幅を、固定したい要素のstyle属性として埋め込む”ということをしています。したがって、初めに表示したときの幅から、いくらCSSを追記しても変更することはできません。
ここを解消するため、この"style属性を埋め込む"部分をなくします。これにより、あとからCSSを追記することで幅の変更を可能とします。

１．plugins > sticky-menu-or-anything-on-scroll > assets > js > jq-sticky-anything.jsを編集します。

/* 293行目 */
      assignedStyles +=
        /* ここから修正 >> */
        // "width:" +
        // widthPlaceholder +
        // "px; height:" +
        "height:" +
        /* ここまで修正 << */
        heightPlaceholder +
        "px; margin:" +
        marginPlaceholder +
        ";";

      $(".sticky-element-original")
        .removeClass("sticky-element-active")
        .removeClass("element-is-not-sticky")
        .addClass("element-is-sticky")
        .css(
          "cssText",
          originalInlineStyles + "margin-top: " +
            stickyTopMargin +
            "px !important; margin-left: 0 !important"
        )
        .css("position", "fixed")
        .css("left", leftOrgElement + "px")
        .css("top", stickyTop + "px")
        /* 削除 >> */
        // .css("width", widthSticky)
        /* 削除 << */
        .css("padding", paddingSticky)
        .css("z-index", stickyZindex);

ソースを見るとわかるように、Widthに関係ある箇所を削除します。
これで埋め込みがされなくなりました。
編集後は、https://www.toptal.com/developers/javascript-minifier/　
などで整形してから、jq-sticky-anything.min.jsに張り付けてください。

２．CSSを追加する。
子テーマに追加でもカスタマイズの追加CSSでもいいのですが、以下を追記します。

固定する要素 {
    width: 100%;
}

以上で解決します。
自分のテストホームページで簡単に動かしてみて問題ありませんでしたが、簡易的な修正方法ですので複雑に動くホームページだとどこかで動作不良が起きえることもありますが、ご理解ください。