更改特定宽度重复设计的菜单布局WordPress

我正在开发一个响应式WordPress主题。

在普通电脑(全尺寸)上,菜单是可见的,就像:

<div id="header-menu" role="complementary">    
     <ul>
         <?php wp_list_pages('title_li=&depth=1&link_before=<span>&link_after=</span>'); ?>
     </ul>
</div>

在一定的宽度上(对于移动设备和平板电脑,我想用这样的菜单取代这个菜单:

<div id="header-menu-mobile" role="complementary">
       <form action="<?php bloginfo('url'); ?>" method="get">
       <?php

       $args1e = array(
        'depth'            => 1,
        'child_of'         => 0,
        'selected'         => 0,
        'echo'             => 1,
        'name'             => 'page_id');

        wp_dropdown_pages( $args1e ); ?>

       </form>
    <script type="text/javascript"><!--
    var dropdown = document.getElementById("page_id");
    function onCatChange()
    {
        if ( dropdown.options[dropdown.selectedIndex].value > 0 )
        {
            location.href = "<?php echo get_option('home');
            ?>/?page_id="+dropdown.options[dropdown.selectedIndex].value;
        }
    }
    dropdown.onchange = onCatChange;
    --></script>
</div>

我可以在css中为某个宽度设置“标题菜单”以隐藏。。。并将“标题菜单移动”设置为可见。我有点累了,也许有更好的解决方案可以让它发挥作用。

有什么想法吗?

致以亲切的问候 约翰