css - 响应式网站上的居中菜单

Question

我得到了这个站点模板，并希望在菜单未折叠时将其居中。 http://themes.iki-bir.com/kyte/index.html

html代码是：

div class="nav-collapse pull-right collapse"

的CSS：

#header.navbar {
padding: 25px 0;
background: #FFF;
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.07);
-moz-box-shadow: 0 3px 0 rgba(0,0,0,0.07);
box-shadow: 0 3px 0 rgba(0,0,0,0.07);
position: relative;
z-index: 1001;
width: 100%;
display: block;
position: fixed;

希望这就足够了.. 非常非常感谢！

奥伦

Answer 1

将此添加到您的样式表中：

#header.navbar-fixed-top .nav-collapse {
    float: none;
    width: 100%;
    position: absolute;
    right: 0;
    top: 27px;
}
.navbar .nav {
    width: 715px;
    margin: 0 auto;
    float: none;
}

Answer 2

要在菜单未折叠时将其居中，请尝试以下操作：

@media (min-width: 980px) {
    #header .container{  text-align:center; }
    #header.navbar-fixed-top .nav-collapse{ float:none;display:inline-block; }
}

媒体查询仅在菜单未折叠时才以菜单为目标，此媒体查询可能已经在您的样式表中，因为我看到模板正在使用引导程序。