「通常状態のブラウザで表示している際は、ウィンドウサイズを縮めていってもレスポンシブ用スタイルが当たらず、PC用のスタイルで表示されたままだが、開発ツールのToggle Device Toolbarを使ってディスプレイサイズを縮めると、レスポンシブ用のスタイルが当たる」ということでしょうか。

そもそものコードが正しいことが前提にはなりますが、そのようなことは通常ありえないはずなので、

・そもそも開発ツールを使用していない際、本当に充分ウィンドウ幅を縮めたのか
・開発ツールを開き、Toggle Device Toolbarを使わずウィンドウ幅を縮め、該当する箇所のCSSにレスポンシブ用のCSSが当たるか否かを確認する。
・ブラウザを変えてみる
・キャッシュのクリアを行ってみる

等を確認してみてください。

＞ハンバーガーのアイコンを表示状態にしてクリック(表示位置はタイトルとナビゲーションメニューの間) → アイコンは「×」に変わりクラスの追加と削除はされるが、ナビゲーションメニューの表示はPCモードのまま

ハンバーガーのアイコンはmq()にて指定サイズ以下にならないと表示されないはずですが、レスポンシブの適用がされな状態でなぜ表示されているのでしょうか。コードを書き換えてPCサイズ時でも表示可能にしたのでしょうか。


＞レスポンシブ用スタイルは適用されないが...
Toggle Device Toolbarを使わなかった場合、画面を縮めていっても開発ツールでメディアクエリ関連の記述は一切適用されていないことは確認済みでしょうか。また、ハンバーガーアイコン以外にも、scssにてmq()を使用してレスポンシブ用の記述をしていますが、それらも一切適用されていないのでしょうか。

例えば、ヘッダーメニューのulタブを開発ツールで監視していると、画面幅が一定値以下になると、下記のようにメディアクエリの記述が表示され、同様に一定値以上になると下記の記述は消えます。

@media screen and (max-width: 768px)
.menu {
display: block;
font-size: 30px;
}

ChromeのToggle Device Toolbarを使用した場合とそうでない場合で違いがあるか、念の為確認してみましょう（前者の場合のみレスポンシブが適用されるのであれば、前者の時だけ上記のコードが表示され、後者の時には何の反応もないはずです）。

＞・Toggle Device Toolbar を使用・・・メディアクエリ関連の記述は 表示⇔非表示 になります
＞・Toggle Device Toolba 不使用で画面幅を縮める・・・メディアクエリ関連の記述は表示されません

確かに上記の状況だとChromeやSafari使用時、原因はわかりませんが確かにレスポンシブが効いていないですね。IEであれば問題なく適用されていたり、ChromeでもToggle Device Toolba使用時には正しく挙動しているのであれば、少なくともコード自体には問題は無いはずですので（私の方でも再度コードをDLしてSafari・Chromeにて確認を行いましたが、問題なく挙動しました）、その場合は何らかの環境依存の問題（OSやブラウザの設定、プラグイン等）である可能性が高いと言えます。

その場合、原因特定は時間がかかることが多いので、とりあえずToggle Device Toolbarでレスポンシブデザインの確認を行えるのであれば、その方法でレッスンを続けてみてください。


もし環境依存の問題だと仮定して原因を特定していくのであれば、まずはMac/Windowsの各OSやブラウザごとに、正しく挙動するもの/しないものに切りわけて原因を探していく必要があるでしょう。実行環環境として挙げられているWindowsとMacにて、現状の検証ではIE（動く・OS:Windows）、Safa（動かない・OS:Mac）、Chrome（Toggle Device Toolba 使用時のみ動く・OS：？）の３つですが、例えば

・（両OSで試していないのであれば）別OSのChromeでは挙動するか否か。
・他のWindowsのブラウザ（Edge、Firefox等）では挙動するか否か。
・Macの他のブラウザ（Firefox等)では挙動するか否か。
・ブラウザを初期化しても挙動しないか否か。
...

のように検証を続け、なぜ特定のOSやブラウザのときにだけ挙動するのかを考えたり、ネット検索をする等する必要があります。

ご報告ありがとうございます。

Toggle Device Toolbaを使用しない場合、開発者ツールを左右のどちらかに配置させて横に伸ばすことで仮想的にウィンドウ幅を縮める事ができます。

参考：https://teratail.com/questions/230603

とはいえ、現場でもスマホサイズのコーディングを行う際は一般的にToggle Device Toolbaを使用し、それ以上の確認には実際のスマホを用いて検証等を行います。なので、拡張機能や追加の設定などを行う等、上記以外の方法でPC・Mac上で既定値以下にウィンドウ幅を縮める必要は無いでしょう。