为 WordPress 更改 22 日的移动菜单？

Question

我正在为 wordpress http://wordpress.org/extend/themes/twentytwelve 使用主题 21，并更改了菜单，使其看起来适合桌面。在移动版本中，菜单按钮会显示，但是当您单击它时会出现我的常规菜单。我想在不影响我的正常菜单的情况下调整移动菜单的样式，但找不到在哪里做。我的网站不在线，所以我无法提供我网站的链接

二十二演示http://twentytwelvedemo.wordpress.com/

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

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

已更改以下 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;
    }

来自主题http://pastebin.com/SFaT4BCn的整个css文件

Answer 1

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

Answer 2

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