Css 响应站点上的中心菜单
我得到了这个网站模板,并希望在菜单未折叠时将其居中。 html代码是:Css 响应站点上的中心菜单,css,menu,responsive-design,center,Css,Menu,Responsive Design,Center,我得到了这个网站模板,并希望在菜单未折叠时将其居中。 html代码是: div class="nav-collapse pull-right collapse" #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
div class="nav-collapse pull-right collapse"
#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;
css:
div class="nav-collapse pull-right collapse"
#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;
希望这足够了。。
非常非常感谢
Oren若要在菜单未折叠时居中显示,请尝试以下操作:
@media (min-width: 980px) {
#header .container{ text-align:center; }
#header.navbar-fixed-top .nav-collapse{ float:none;display:inline-block; }
}
只有当菜单未折叠时,媒体查询才以菜单为目标,此媒体查询可能已经在您的样式表中,因为我看到模板正在使用引导。将此添加到您的样式表中:
#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;
}
实际上,当菜单崩溃时,这个解决方案给我带来了一些麻烦。。谢谢你的努力!