画面の大きさによってメニュー画面を折りたたむ方法

Question

前提・実現したいこと

サイト作成で576px以上の画面幅のとき、ヘッダー部分にメニューを表示し、それ未満なら折りたたむようにしたいです。

発生している問題・エラーメッセージ

やり方が良くわからないです。

エラーメッセージ

言語
HTML CSS Bootstrap

ソースコード

### 試したこと

教材を見返しましたが分かりません

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[itzuakniami123]

折りたたむということは、ヘッダーのメニューを見えなくするということでしょうか？

[toma8]

見えなくなりますが、折りたたんだら右上に三本線のアイコンからそのメニュー画面を表示するマークが出るようにしたいです。

Answer 1

@media screen and (min-width:576px) { 
    /*　画面サイズが576pxからはここを読み込む　*/
    /*　以下変更したいスタイルを記入　*/
}

下記のサイトを参考にしてください。
レスポンシブの基本、メディアクエリの書き方

モバイルファーストの今ではなくてはならない大事な記述ですのでしっかり覚えましょう！

Answer 2

おそらくメディアクエリの話だと思いますので、
HTMLとCSSでそれぞれでやる場合が以下にありますのでご参考にどうぞ。
https://sole-color-blog.com/blog/71/