Css 在12点为WordPress更改移动菜单？

我正在为wordpress使用主题“二十一”，并已更改了菜单，使其适合桌面。在移动版本中，菜单按钮会显示，但当您单击时，它会显示我的常规菜单。我想风格下来移动菜单没有我的正常菜单是受影响的，但无法找到在哪里做它。我的网站不在线，所以我不能给我的网站链接

212演示

这是我的destop菜单，看起来不错。

这是我想要在不影响桌面菜单的情况下设计的移动菜单

已将以下css更改为“我的桌面”菜单的样式

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 2px solid #f68a1f;
        border-top: none;
                margin: 0 0 2px 0;
                padding: 0px;
                padding-top: 50px;
        width: 550px;
    }
    .main-navigation ul {
        float: right;
                margin: 0;
                padding: 0;
                list-style: none;
    }
    .main-navigation li a,
    .main-navigation li {
        list-style: none;
                float: left;
                width: 90px;
                margin:0px;
    }
    .main-navigation li a {
        color: #292A2B;
            display: block;
            padding: 5px 5px;
            text-align:center;
            text-decoration: none;
            font-weight: normal;
            font-size: 14px;
            line-height: 30px;

            border-radius: 10px 10px 0px 0px;
            -moz-border-radius: 10px 10px 0px 0px;
            -webkit-border-bottom-right-radius: 0px;
            -webkit-border-bottom-left-radius: 0px;
    }
    .main-navigation li a:hover {
        color: #ffffff;
    background-color: #f68a1f;

    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 1rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        display: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul {
        color: #ffffff;
    background-color: #f68a1f;

    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    }
    .main-navigation li ul li a {
        color: #292A2B;
                display: block;
            padding: 5px 5px;
            text-align:center;
            text-decoration: none;
            font-weight: normal;
            font-size: 14px;
            line-height: 30px;

    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    }
    .main-navigation li ul li a:hover {
        color: #ffffff;
                background-color: #f68a1f;

    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    }

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #ffffff;
                background-color: #f68a1f;
    }

---

主题中的整个css文件

是否使用媒体查询？尝试使用媒体查询设置特定设备分辨率的样式。

找到/*=媒体查询/*最小宽度为600像素。*/在CSS和主题中，首先使用mobile。刚刚将我的代码移动到该部分。

是，主题使用媒体查询。主题中的整个css文件您能提供一个JSFIDLE或codepen中菜单的清晰示例吗？