Avadaのメニューって英語表記だとさらっとしていて格好良いのだけれども…
日本語にすると若干パンチがね。で、もっとも簡単にカスタムしてみる。
方法として簡単なのは、【外観】の【メニュー】の【ナビゲーションラベル】に直接HTMLを記述するやり方。
例えば、
1 |
ホーム<div class="menu-styling">HOME</div> |
と記述すれば
日本語表記
英語表記
英語表記
のような二段のメニューができる。
で、クラスで指定したCSSには例えばこんなふうにする。
1 2 3 4 5 6 7 8 9 10 |
.menu-styling{ margin-top:0px !important; padding-top:0px !important; position: relative; top: -60px; font-size:12px !important; text-align:center; letter-spacing: 1px; opacity:0.3 !important; } |
これだけで、見た目にボリュームが出るので、何となく間が持つメニューができる。
因みに、AvadaやBootstrapを使ったレスポンシブルなテーマだとモバイルメニューにも表示されてしまうので、メディアクエリでブレイクポイントサイズを切っ掛けに
1 |
display:none; |
も忘れずに。
あと、【ナビゲーションラベル】にHTMLが書けると言うことは、メニューのテキストを画像にだってできる。
1 |
<img src="URL" /> |
にすれば、ちゃんと表示される。
なので、DIVでくくってHoverの要素でデザインしてあげれば画像ボタンにもできる。
例えば「opacity:0.3;」なんかをふってあげとけば、ロールオーバーで薄くなってくれる、とかね。
「高機能有料テーマ「Avada」を使ってみる Vol.10」への1件のフィードバック
コメントは停止中です。