【Twenty Twelve】グローバルナビのメニューの間隔や幅を変更するCSS

グローバルナビのメニューの間隔や幅を設定するCSSについて。

メニューの幅の設定

グローバルナビで表示されるメニューの幅は、設定されていませんので幅を設定したい場合、「@media screen and (min-width: 600px){}」にある「.main-navigation li」にwidthプロパティを追加して幅の設定をします。

.main-navigation li {
  margin: 0 40px 0 0;
  margin: 0 2.857142857rem 0 0;
  position: relative;
  width:100px;
}

メニューの間隔の設定

メニュー（グローバルナビ）に表示されるテキストとテキストの間隔を変更するには、上nの記事にある「.main-navigation li」のmarginの値を変更します。

.main-navigation li {
  margin: 0 20px 0 0;
  margin: 0 1.428571429rem 0 0;
  position: relative;
}

ie.cssも同じ「.main-navigation li」のmarginの値を変更します。

.main-navigation li {
  margin: 0 20px 0 0;
  position: relative;
}