テーマのカスタマイズで設定できないものは、追加CSSにCSSコードを追加してカスタマイズします。
まずは、ブラウザのデベロッパーツールでどのようなHTML構成でどのようなCSSが設定してあるかを検証します。Chromeの場合の使い方は下記を参照。「デベロッパーツール」でググれば他にも解説サイトがみつかります。
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
検証してみると、メニューのHTMLは下記のようになっています。
html
1<div class="vk-mobile-nav-menu-btn">MENU</div>
vk-mobile-nav-menu-btnクラス属性が付加されてますので、CSSでそのクラスに対して設定すればカスタマイズできます。CSSは下記のようになっています。
css
1.vk-mobile-nav-menu-btn {
2 position: fixed;
3 top: 5px;
4 left: 5px;
5 z-index: 2100;
6 overflow: hidden;
7 border: 1px solid #333;
8 border-radius: 2px;
9 width: 34px;
10 height: 34px;
11 cursor: pointer;
12 text-indent: -9999px;
13 background: url(../../inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg) center 50% no-repeat;
14 background-size: 24px 24px;
15 -webkit-transition: border-color .5s ease-out;
16 transition: border-color .5s ease-out;
17}
CSSをカスタマイズするには「追加CSS」に独自のCSSを追加します。
とりあえず追加CSSに下記のCSSを追加してみてください。
css
1.vk-mobile-nav-menu-btn {
2 text-indent: 2px;
3 font-size: 10px;
4 line-height: 55px;
5 background-position: top;
6 background-size: 22px 22px;
7}
これで三本線の下に「MENU」が表示されます。
やっていることは、HTMLにある「MENU」をtext-indent: -9999px;
で範囲外に移動させて非表示にてしているのをtext-indent: 2px;
で範囲内に戻します。
あとは、line-height: 55px;
で垂直位置を調整します。
三本線はSVG画像で表示していますが、background-position: top;
で上部に移動させます。サイズもbackground-size: 22px 22px;
で少し小さくします。
メニューをクリックして×マークになったときの位置とサイズも下記のCSSを追加して設定します。
css
1.vk-mobile-nav-menu-btn.menu-open {
2 background-position: top;
3 background-size: 22px 22px;
4}
こんな感じでカスタマイズしていきます。
この手のカスタマイズはHTMLとCSSの知識が必須ですね。それがあればかなり自由にカスタマイズできます。