Can't style custom menu

时间:2013-07-23 作者:Steve

我有Wordpress菜单on my site 由代码生成:

<?php wp_nav_menu( array( \'theme_location\' => \'primary\', \'menu_class\' => \'nav-primary\' ) ); ?>
当我将名为“类别”的菜单分配到“主菜单”位置时,这将生成前端代码:

<ul id="menu-categories" class="nav-primary">
    <li id="menu-item-910" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-910">
        <a href="http://steven.doig.com.au/category/environmental/">Environmental</a></li>
</ul>
未应用以下CSS:

.nav-primary {
    display: block;
}
.nav-primary ul {
    list-style-type: none !important;
    background-color: rgba(0,0,0,0.25) !important;
    padding: 5px !important;
    border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
}
.nav-primary ul li {
    display: inline-block !important;
    background-color: rgba(0,0,0,0.25) !important;
    margin-right: 5px !important;
    height: 32px !important;
    padding-top: 8px !important;
    border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -webkit-border-radius: 8px !important;
}
.nav-primary ul li a {
    text-decoration: none !important;
    color: #fff !important;
    margin: 8px 14px 0 14px !important;
}
当前端输出的ID是从外观>菜单中的菜单名称生成的时,如何设置此菜单的样式?

如果我向公众部署这个主题,我将永远无法预测菜单的名称,生成的ID将始终优先于类。

1 个回复
最合适的回答,由SO网友:Anon 整理而成

我认为你没有正确地定位元素。尝试以下操作:

    #mainmenu {
        display: block;
    }
    #mainmenu ul.nav-primary {
        list-style-type: none !important;
        background-color: rgba(0,0,0,0.25) !important;
        padding: 5px !important;
        border-radius: 8px !important;
        -moz-border-radius: 8px !important;
        -webkit-border-radius: 8px !important;
    }
    #mainmenu ul.nav-primary li {
        display: inline-block !important;
        background-color: rgba(0,0,0,0.25) !important;
        margin-right: 5px !important;
        height: 32px !important;
        padding-top: 8px !important;
        border-radius: 8px !important;
        -moz-border-radius: 8px !important;
        -webkit-border-radius: 8px !important;
    }
    #mainmenu ul.nav-primary li a {
        text-decoration: none !important;
        color: #fff !important;
        margin: 8px 14px 0 14px !important;
    }
尝试替换上面提到的代码或将其添加到文件底部↓

http://steven.doig.com.au/wp-content/themes/transparent/style.css

结束

相关推荐

Internet Explorer ignore my css

我正在创建我的个人博客,但Internet explorer是我。大约5个小时,我试图找出我做错了什么,那么我的问题是什么?嗯,我为我的网站创建了面包屑,只针对特定的自定义类型-评论。所有浏览器都可以,但internet explorer(我有IE 10)正在将我的侧边栏推远。例如,如果您打开此“我的评论”http://milanchymcak.com/reviews/fix-redirect-virus-review - 如果您在firefox或chrome中打开它,就可以了。但在Internet ex