メニューが増えると、メインナビゲーションが2行になってしまうことがあります。そんな時にはメニューの間隔を詰めると調整できます。
/* メニューバーの高さと背景色を変更 */
.main-navigation a {
padding: 0.8em 1.25em; /* 左が上下の高さ・右が間隔の調節 */
}
.navigation-top {
background: rgba(20, 0, 0, 0.9); /*背景色*/
border-bottom: 1px solid rgba(49,80,150,0.25); /*上線の太さと色*/
border-top: 1px solid rgba(49,80,150,0.25); /*下線の太さと色*/
}
.navigation-top a {
color: rgb(255, 255, 255); /*文字色*/
-webkit-transition: color 0.3s; /*文字色の変化に要する時間*/
transition: color 0.3s; /*文字色の変化に要する時間*/
}
.navigation-top a:hover {
color: #FF00CC; /*マウスオーバーの文字色*/
background: rgba(55, 118, 255, 0.35) /*マウスオーバーの背景色*/
}
以上です。