【Airbnb模写】ナビバーでレスポンシブ対応（スマホ版）した時文字が消えてしまう

Question

Airbnb模写をしている最中ですが、ナビバー部分をレシポンシブ対応（スマホ版）させたいのですが、575px以下になると文字が消えてしまいます。ググって見たのですが、解決の糸口が見つからず何でも結構ですのでご教授願います。

※スマホのレスポンシブ対応→現状問題ありのもの
bootstrapを使い、navber-expend-smを記載しているが、575px以下になると「ガクっと」文字が消えてしまう

※スマホのレスポンシブ対応→このように表示させたい

実際のコード

PCのレスポンシブ対応→問題なし

タブレットのレスポンシブ対応→問題なし

Answer 1

クラス名にnavbar-expand-lg navbar-expand-md navbar-expand-smと並べていますが、すべてのサイズで展開させたい場合はnavbar-expandだけでいいはずです。

<nav class="navbar navbar-expand navbar-light bg-white fixed-top">

仮にsmのサイズ以上で展開させたい場合はnavbar-expand-smだけでよく、すべてのサイズで折り畳みたい場合はnavbar-expand{-sm|-md|-lg|-xl}は必要ありません。

Answer 2

Bootstrap では collapseクラスをつけた要素は、折りたたまれ表示されません。

navbar-expand-{break-point}クラスが祖先にあれば、そのブレークポイントでは折りたたまれたものが展開されます。

参考：
Responsive behaviors | Navbar - Bootstrap 4.2 - 日本語リファレンス

Comments

[satoshi4365]

返信遅くなりました。
ご回答ありがとうございます。
本件無事解決することができました。