メニューをカスタマイズその2


今回はメニューのカスタマイズその2として、前回の方法でメニューを追加しすぎた場合、レイアウトが崩れてしまいます。

メニュー崩れ

今回はcssを調整することで解決してみようと思います!

変更するファイルは、
/resources/styles.css
です。共通で使われるので、全般に渡るスタイル変更はこちらで大丈夫です。

 

/resources/styles.cssの最後の行に下記を追加します。

.navbar .nav > li > a {
  padding: 10px 5px 11px;
}

メニューの左右余白を「10px」から半分の「5px」へ変更しています。
崩れ幅によって変更して下さい。

これでキレイに収まりました。

メニュー崩れ解決