メニューの高さを変えてみましょうか^^
まず、ざっくりメニューは、このような構造になっています。
<div id=”gMenu”>
<div id=”gMenuInner” class=”innerBox”>
<ul>
<li>
<a>メニュータイトル
デフォルトの場合、高さ関係のcssが、どうなっているかというと
(以下、@media (min-width: 770px)で)
#gMenu .menu > li > a
(右ボーダーはココ)
#gMenu .menu > li
34px=11+14+9 #gMenu .menu
(左端ボーダーはココ) つまり、メニューの高さを変えようと思ったら、
#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調整してみて下さい。^^
- 投稿タグ
- カスタム