Question

我使用主题二十二为wordpress http://wordpress.org/extend/themes/twentytwelve，并更改了菜单，使其看起来不错。在移动版本中，菜单按钮显示，但是当您单击它时会出现我的常规菜单。我想在没有普通菜单的情况下调低移动菜单的样式，但无法找到它的位置。我的网站不在线，因此我无法提供指向我网站的链接

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

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

这是我要设置的移动菜单而不影响桌面菜单 mobile menu

更改了以下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中，主题首先使用移动设备。刚把我的代码移到那个部分。

为WordPress改变二十二点的手机菜单？

2 个答案: