モバイルメニューに影響を与えずにWordpressウェブサイトのメニューを表示する方法

Question

私はワードプレスのウェブサイトwww.theestablishmenthairdresing.comのトップメニューを中心にして、ブラウザウィンドウが開いたときにトップメニューがロゴと重ならないようにしましたしかし、

nav#site-navigation.main-navigation { 
margin-left: auto; 
margin-right: auto; 
width: 80em; 
} 

私はウェブサイトのためのモバイルメニューをチェックしたときに、今のサブメニューがドロップダウンオプション「については、」モバイル版に表示されないため、スクリーンショットを参照してください。サイズは、次のコードを使用して減少しています。

コードを追加する前に：

コードを追加した後：https://imgur.com/a/0ploD

解決方法はありますか？

Answer 1

<button id="menu-toggle" class="menu-toggle"><?php _e('Menu', 'xyz'); ?></button> 

        <div id="site-header-menu" class="site-header-menu"> 
         <?php if (has_nav_menu('primary')) : ?> 
          <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e('Primary Menu', 'xyz'); ?>"> 
           <?php 
            wp_nav_menu(array(
             'theme_location' => 'primary', 
             'menu_class'  => 'primary-menu', 
            )); 
           ?> 
          </nav><!-- .main-navigation -->