はじめに
画面を最大化した時にメニューボタンが表示されなくなったので、いろいろ調べていました。
原因としては、buttonのクラスに「lg:hidden」を設定したのが原因でした。
環境
Laravel 9.52.16
Tailwind CSS 3.1.0
問題
- 期待する表示画面
- 画面を最大化すると右上の「ゲスト」が消える
ちなみにこの「ゲスト」部分のボタンはこのような記述。
navbar.blade.php
<button type="button" tabindex="0" class="btn btn-ghost normal-case font-normal lg:hidden">
解決法
- buttonの「lg:hidden」クラスを削除する
navbar.blade.php
<button type="button" tabindex="0" class="btn btn-ghost normal-case font-normal"> // 'lg:hidden'を削除
今回の「画面を最大化するとボタンが見えなくなる」問題は、やはりレスポンシブデザインの設定に関連していました。
具体的にはlg:hiddenというクラスが原因となっています。
このlg:hiddenクラスは、画面の幅がlg（large）ブレークポイント以上になったときに、要素を非表示にするためのものです。
したがって解決策として、lg:hiddenクラスを削除することが正解となります。