といっても、もちろん！？自身でこのような高度な技術は全くもって持っていないため、今回も数あるサイトの中から参考にさせていただいて実装いたしました。「固定メニューバー」と検索すると山のようにでもないとは思いますが、沢山の参考となるブログサイトが出てきます。ただし、私の場合はWordPressに実装し、かつ既に色々と構築した自己テーマを活かしつつ、かつプラグインなしで、といういつもながらの制約付きですので、条件にあうサイトを探すのにまずは苦労しました。
　基本的にはスクロールしてヘッダーメニューが上に消えた時に、上から代わりのメニューバーが表示されるという単純なものです。ただし、出てくるメニューバーにロゴを表示させたいのと、元から表示されているメニューバーとは違うコンパクトなメニューバーを表示させたかったので、単なるヘッダーメニューを固定する方式ではないコードを中心に参考にさせてもらっています。

そんな自身の知識もないのですが、我儘な要望に応えてくれるべく、ようやく見つけたサイトが下記になります。

WordPressでふわっと表示される固定式ヘッダーの作り方と【HABONE】テーマでの設定方法（jQuery+PHP+CSS）

比較的簡単にWordPressサイトへjQueryとCSSを使って、スクロールされると上部に固定表示されるヘッダーを追加…

https://habone.biz/habone/habone_custom/sticky-header

こちらの方は配布されている？テーマに実装した内容を説明してくださっているようなので、私のようなケースには非常に参考になりました。実際のコードやファイルの場所は適宜、自分の自己テーマの構成に合わせて多少変更しましたが、ほとんど何も変更せずにそのまま実装することが出来ました！本当にありがとうございました。

今回も素人らしいミスで恥ずかしい限りですが、少々ハマったところを忘れないように備忘録として残しておきます。

追加する構成ファイルの文字コードが文字化けする（エディターのAtom上は問題ないのですが、実際にブラウザで見てみると文字化けしてました。。。）ため、新たに作成する追加ファイルは既存ファイルをコピペして使用する（文字コードの指定も未だによく分からない素人ということでしょうか。。。）

にゅるっと出てくるためのアニメーション部分

最後に上記サイトでは実装していなかった「にゅるっと出てくるためのアニメーション部分を実装」なのですが、そのままですが下記のサイトを参考にcssで実装してみました。

jQueryでスクロールして途中からヘッダーメニューを固定させる！にゅるっと出てくるアニメーションの作り方も紹介

6月第2週にお送りしているQuery Week。jQueryでタブで切り替えできるメニューを作成！メニュー数が増えても対…

https://arrown-blog.com/jquery-mebu-scroll-fixed/

サブメニューの表示について

ここまでで、大体最初に自分が実装したかった機能とデザインが完了します。その後はサブメニューの表示なども下記のサイトを参考に整えていきます。

CSSだけ！WordPressのメニューにサブメニューを追加しデザインを整える

WordPressのメニューを階層化して表示したい場合は、サブメニューを有効に活用しましょう。今回は、WordPress…

https://plusers.jp/blog/wordpress-submenu

アイコンの追加など

その後は、こちらも久しぶりに使ってみたFont Awesomeで色々とアイコンを追加してみました。ただ、どうしてもいくつか欲しいアイコンがフリーのバージョン５系統では見つからなかったので、こちらも良く参考にさせてもらっているサイトなのですが、下記記事を参考に幾つかSVGアイコンを追加いたしました（こちらのサイトのfeedlyアイコンも使わさせていただいております。ありがとうございます。）

自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）

最近は、その便利さからWEBアイコンフォント（以下、アイコンフォント）を利用したサイトが増えています。 アイコ…

https://nelog.jp/feedly-web-iconic-font

今回は上記のfeedlyに加えて、Push7というWeb通知サイトも導入してみました。その際に同じく寝ログさんからPush7のアイコンも使わせていいただいたのですが、feedlyのSVGアイコンファイルに追加するやり方は、下記サイトを参考にしています。

Convert SVG Icons to Export as Icon Font, SVG, PNG, PDF, Sprite, etc. ❍ IcoMoon App

Easily mange your icons and integrate them in your projects.…

各国の国旗アイコン

後は各国駐在記などの国旗アイコンを使いたいと思い、下記サイトからflag-icon-cssというものを導入してみました。もちろん！コンパイルなどの高度な技は使えないため、CDNでのみの導入です。編集時に便利なアイコンを一覧表示してくれているサイトもあります。

国旗アイコンを簡単に使えるCSSライブラリ「flag-icons」が超便利だった

/article/14

flag-icon-css の国旗一覧 | knooto

一応念のためですが、上記サイトに紹介されているバージョンは少し前のようで、最新のver.6.6.6ですとcssの記述が短縮されているので注意が必要です（こちらの本家サイト？の下の方を読めば記載があるようですが）。

古いバージョンの記載

普通：<span class="flag-icon flag-icon-jp"></span>

四角：<span class="flag-icon flag-icon-jp flag-icon-squared"></span>

最新バージョンの記載

普通：<span class="fi fi-jp"></span>

四角：<span class="fi fi-jp fis"></span>

レスポンシブ対応の修正

それと今回はヘッダーメニューを改訂したのに合わせて、随分前にレスポンシブ対応したcssを今一度、見直してみました。

あまりきちんと確認したことはないのですが、一応、スマホ用とパッド用とPC用の３種類で対応させていますが、今回下記のサイトを参考にそれぞれの閾値（ブレイクポイント）を修正しています。結論としてはスマホ用は600px以下、パッド用は1024px以下でしょうか。

画面サイズ別にCSSをメディアクエリで切り替える方法 [ホームページ作成] All About

画面サイズ別にCSSをメディアクエリで切り替える方法を解説。メディアクエリとは、画面サイズなどの閲覧環境に応じて適用スタ…

https://allabout.co.jp/gm/gc/396404/

レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About

レスポンシブWebデザインでCSSを書く際のブレイクポイントを、2018年版アクセス解析結果の画面サイズシェアから考える…

https://allabout.co.jp/gm/gc/454493/

今回も例によって巷にある素晴らしいサイトを参考にさせてもらい、何とかメニューバーの実装をすることが出来ました！超初心者の備忘録ですが、すぐ忘れてしまう将来の自分のためと、もし誰かの参考になれば幸いです。