在我的网站上(使用bootstrap制作),我的导航栏嵌入在最大宽度为800px的容器.boxed #wrapper中(参见第一张图片)。
固定导航菜单出现问题(当用户向下滚动页面时可以看到)。
似乎使用固定菜单,菜单项和徽标不再嵌入容器中(最大宽度为800px)。结果是徽标现在位于视口的最左侧,无论屏幕大小如何,菜单项都位于最右侧,在宽屏幕上看起来很奇怪。
我希望我的菜单项和徽标在初始静态菜单和固定菜单上的位置,例如在this website上。
我该如何解决这个问题?
请参阅https://jsfiddle.net/cLt3pdzL/4/
初始职位:
<div id="nav" class="container-fluid">
<nav class="navbar-classic">
<li><a href="index.html" class="active">Who are we? </a>
<ul class="dropdown">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li><a href="#">Services Services Services</a>
</li>
</nav>
<a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a>
</div>
答案 0 :(得分:2)
这是我的解决方案。我创建了一个div,除非滚动条达到230px,否则它是隐形的,作为导航栏的背景:
HTML:
<div id="nav" class="container-fluid">
<nav class="navbar-classic">
<li><a href="index.html" class="active">Who are we? </a>
<ul class="dropdown">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li><a href="#">Services Services Services</a></li>
</nav>
<a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a>
</div>
<!-- End Menu Container -->
CSS:
#nav.affix {
position: fixed;
top: 0;
width: 100%;
max-width: 800px;
height: 70px;
background: #fff;
z-index: 10;
opacity: 0.9;
margin: 0 0 0 -10px;
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;
padding: 0 25px;
}
#nav.affix > .navbar-classic {
height: 70px;
}
#nav.affix > .navbar-classic li {
padding: 22px 5px 0;
}
#hidden-header-bg{
width: 100%;
height: 70px;
top: 0;
left: 0;
background: #fff;
display: none;
position: fixed;
z-index: 9;
}
.visible{
display: block!important;
}
和JS:
$( document ).ready(function() {
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
if(scrollTop > 280){
$('#nav').addClass('affix');
$('#hidden-header-bg').addClass('visible');
}else{
$('#nav').removeClass('affix');
$('#hidden-header-bg').removeClass('visible');
}
});
});
以下是我的解决方案的链接:https://jsfiddle.net/cLt3pdzL/8/
答案 1 :(得分:2)
尝试在您的风格中添加以下代码
#nav.affix {
margin: 0px 50px;
width: auto !important;
}
你可能会注意到我已经覆盖#nav.affix的样式,使其margin-left
和margin-right
为50px
,等于应用于{{1}的填充并将其body
设置为自动。我希望它会对你有所帮助。这是working fiddle。
<强>更新强>
此update fiddle可以帮助您完成所做的更改。最好使用width
进行修复,并使用另一个内部div
元素以您想要的方式对齐它。
div
我更改了以下代码段::
Note: you were using <li> inside <nav>. I changed the <nav> to <ul>. Using <li> inside any other tags except <ul> and <ol> is not W3C valid.
添加以下css样式:
<!-- Beg Menu Container -->
<div id="nav" class="container-fluid">
<div class="nav-wrap">
<ul class="navbar-classic">
<li><a href="index.html" class="active">Who are we? </a>
<ul class="dropdown">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li><a href="#">Services Services Services</a>
</li>
</ul>
<a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a>
</div>
.nav-wrap {
width:100%;
max-width:800px;
margin:0px auto;
}
答案 2 :(得分:-1)
你会笑,但在Chrome和Firefox中,导航栏在你的jsfiddle示例中滚动时显示正确。
我注意到的一件事是你的词缀css缺少了navbar-classic的填充:
padding: 37px 5px 0;