WordPressでPC時＝ドロップダウンメニュー、スマホ時＝ドロワーメニューを作りたい

前提・実現したいこと

自作テーマを使ってWordPressでブログを作ろうとしています。
ヘッダーメニューを、

●PC時はよくある横並びのメニューで、階層ありのドロップダウン
●スマホ時は横から出てくるドロワーメニュー

にしたい。
ドロワーメニューにはdrawer.jsを使いつつカスタムしています。

ご教示お願いいたします。

発生している問題・エラーメッセージ

PC、スマホ時ともに、親メニュー（ブログのカテゴリー名やプロフィール、問い合わせ）をクリックすると
一瞬だけドロップダウンメニューが表示されますが、すぐに消えます。
親メニューにはどれも内部リンクのURLがついているため、
すぐにページが遷移するからなのかな？と考えもしたのですが、試行錯誤した結果それも違いそうで解決方法がわかりません。。

エラーメッセージ

HTML

HTML
1<nav class="drawer-nav header-nav" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
2  <ul id="drop" class="drawer-menu header-nav-list clear">
3    <li class="header-nav-item-link">
4      <a href="http://life-size-bloglocal.local/category/shopping/">買ったもの</a>
5        <ul class="sub-menu">
6	  <li>
7            <a href="http://life-size-bloglocal.local/category/entame/">エンタメ</a>
8          </li>
9        </ul>
10    </li>
11    <li class="header-nav-item-link">
12      <a href="http://life-size-bloglocal.local/category/trip/" aria-current="page">旅</a>
13        <ul class="sub-menu">
14	  <li>
15            <a href="http://life-size-bloglocal.local/category/food/">食</a>
16          </li>
17        </ul>
18    </li>
19    <li>
20      <a href="http://life-size-bloglocal.local/category/test/">TEST</a>
21    </li>
22    <li>
23      <a href="http://life-size-bloglocal.local/category/outdoor/">アウトドア</a>
24    </li>
25    <li>
26      <a href="http://life-size-bloglocal.local/category/%e7%94%9f%e6%b4%bb/">生活</a>
27    </li>
28  </ul>
29</nav>

PHP

PHP
1/* ワードプレスのメニューに反映 */
2
3wp_enqueue_style( 'drawer', get_template_directory_uri() . '/css/drawer.min.css' );
4
5function my_menu_init()
6{
7    register_nav_menus(
8        array(
9'global' => 'ヘッダーメニュー',
10'drawer' => 'ドロワーメニュー',
11'footer' => 'フッターメニュー'
12)
13    );
14}
15add_action('init', 'my_menu_init');
16
17
18
19/* ワードプレスの余計なクラス名を削除し、付けたいクラス名を指定 */
20
21add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
22add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
23add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
24 
25function my_css_attributes_filter($var) {
26    return is_array($var) ? array_intersect($var,  array( 'header-nav-item-link', 'drop1', 'drop2', 'drop3', 'drop4') ) : '';
27}
28

JcvaScript

JS
1/* ドロップダウンメニューの表示・非表示の切り替え */
2
3$( '.drawer' ).drawer()
4
5    var $dropdown = $('.header-nav-item-link a');
6    var DURATION = 200;
7  
8    function fadeOutMenu(){
9      $dropdown.removeClass('selected')
10        .next('.sub-menu')
11        .stop()
12        .slideUp(DURATION);
13    }
14  
15    function toggleMenu(){
16      var $self = $(this);
17      if(!$self.hasClass('selected')){
18        fadeOutMenu();
19      }
20
21        $self.toggleClass('selected')
22        .next('.sub-menu')
23        .stop()
24        .slideToggle(DURATION);
25    }
26
27    $dropdown.on('click', toggleMenu);
28  
29
30    $(document).on('click touchend', function(event) {
31    if (!$(event.target).closest('.header-nav-item-link a').length) {
32      fadeOutMenu();
33    }
34  });
35