メニューの高さを変えてみましょうか^^

まず、ざっくりメニューは、このような構造になっています。

<div id=”gMenu”>
  <div id=”gMenuInner” class=”innerBox”>
    <ul>
      <li>
        <a>メニュータイトル

デフォルトの場合、高さ関係のcssが、どうなっているかというと

(以下、@media (min-width: 770px)で)

#gMenu .menu > li > a

(右ボーダーはココ)

Capture_2015_05_09_13_36_24_49

#gMenu .menu > li

34px=11+14+9 Capture_2015_05_09_13_36_29_165 #gMenu .menu
(左端ボーダーはココ) Capture_2015_05_09_13_36_35_732 つまり、メニューの高さを変えようと思ったら、

#gMenu .menu > li > a で、操作するのが一番スマートです。

マウスオーバー(a:hover)やアクティブ(li.current_page_item)の調整不要です。

何をすればいいかというと、

1.height指定

2.上下padding調整

のみ。

 

例えば、メニュー高さを60pxにしようと思うと、

height:60px;

padding: 26px 15px 20px;

(上padding:26px + 文字:14px + 下padding:20px = 60px という計算です)

ぐらいで、そこそこになります。

 

「ちょっとメニューの高さを変えたいな」な時は、こんな感じでcss調整してみて下さい。^^