SlickNav Mobile Menuは指定したブラウザサイズからSlickNavに切り替えることができるプラグイン。ブラウザサイズ指定、ロゴ追加、ラベル変更、ヘッダー固定、リンク色変更、メニュー背景色変更も設定することが可能。

SlickNav Mobile Menuプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> SlickNav Mobile Menuを検索
有効化にすると設定にSlickNav Menuが追加されます。

事前にメニューを作成しておきます。今回サンプルに上記のようなメニューを作成したとします。

<nav class="center main-header-nav">
<style>.main-header-nav ul li { display: inline-block; margin-right: 5px; } </style>
<?php wp_nav_menu( array(
            'theme_location'=>'main-navi', 
            'container'     => false, 
            'items_wrap'    =>'<ul>%3$s</ul>'));
        ?>
</nav>

Add Menu to Replaceに.main-header-navを追加するだけでも使えました。

Updateをクリックします。

PC表示。

ブラウザ幅を600px（デフォルト）狭めました。

MENUをクリック。

• Tag
• Navigation
• Responsive
• WordPress Plugin