直到我上周检查它才能正常工作。我甚至没有改变代码。请访问此网站链接,并帮助我在视差图像后定位NAVBAR。www.abhisaran.tk
请查看 Image以便您可以了解我的问题。 谢谢。
这是视差和资产净值栏的HTML片段:
<div class="wrapper" id="wrapper">
<header>
<div class="banner row" id="banner">
<div class="parallax text-center" style="background-image: url(img/1.jpg);">
<div class="parallax-pattern-overlay">
<div class="container text-center" style="height:600px;padding-top:170px;">
<a href="#"><img id="site-title" class=" wow fadeInDown" wow-data-delay="0.0s" wow-data-duration="0.9s" src="img/2.png" alt="" /></a>
<h2 class="intro"><a id="neon" href="index.html">Hola !</a></h2>
</div>
</div>
</div>
</div>
<div class="menu">
<div class="navbar-wrapper stuckMenu" style="position:relative;" >
<div class="container">
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navArea">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="menuItem active"><a href="#wrapper">Home</a></li>
<li class="menuItem"><a href="#aboutus">About Me</a></li>
<li class="menuItem"><a href="#specialties">Portfolio</a></li>
<li class="menuItem"><a href="#gallery">Skills</a></li>
<li class="menuItem"><a href="#feedback">Education</a></li>
<li class="menuItem"><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
这是CSS代码段:
/* --- Menu --- */
.isFixed {
left:0px;
width:100%;
}
.menu {
margin-top:0px;
position:absolute;
z-index:999;
left:0px;
right:0px;
bottom:0;
}
.navArea {
/*float:right;*/
}
.navwrapper .container {
padding:0;
width:auto;
}
.navbar-header {
display:none;
}
.nav>li>a {
display:inline-block;
}
.navbar-nav>li {
float:none;
display:inline-block;
}
.navbar-nav {
margin:0 auto;
text-align:center;
float:none;
}
.navbar-toggle {
margin-top: 14px;
}
/* Special class on .container surrounding .navbar,used for positioning it into place. */
.navbar-wrapper {
margin-top:0px;
height:80px;/* changed from 80%*/
position:relative;
z-index:15;
margin-right:-15px;
}
.navbar-wrapper .container {
padding:0px;
}
.navbar-collapse {
padding:0;
}
.navbar-collapse.in {
max-height:100%;
}
.navbar.navbar-inverse.navbar-static-top {
margin:0px auto;/*changed from 0 auto*/
background:none;
color:#92DD03;
border:none;
font-family:'Open Sans',sans-serif;
font-size:14px;
font-weight:600;
text-transform:uppercase;
}
.navbar.navbar-inverse.navbar-static-top a {
color:#fff;
padding:31px 16px;
line-height:18px;/* CHANGED FROM 18PX */
text-align:center;
}
.navbar.navbar-inverse.navbar-static-top a:hover {
background:none;
color:#fff;
}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus {
background:none;
color:#fff !important;
}
.navbar-inverse .navbar-nav>.active>a:hover {
color:#fff;
}
.hideClass {
display:none;
}
.isFixed .navbar-inverse .navbar-nav>.active>a,.isFixed .navbar-inverse .navbar-nav>.active>a:focus {
background:#92DD03 ;
color:#fff;
}
.isFixed .navbar.navbar-inverse.navbar-static-top a:hover {
background:#92DD03 ;
color:#fff;
}
.isFixed .navbar.navbar-inverse.navbar-static-top a {
color:#fff;
}
.stuckMenu {
-o-transition:all .5s;
-ms-transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
transition:all .5s;
background:#111;
}
.isFixed {
background:#333;
-o-transition:all .5s;
-ms-transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
transition: all .5s;
}
.collapse {
display: block !important;
}
@media (max-width: 655px) {
.collapse {background: #333;}
.navbar.navbar-inverse.navbar-static-top a {padding: 15px 16px;line-height: 15px;font-size: 13px;}
}
/* --- Parallax --- */
.parallax {
text-align:center;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed !important;
overflow:hidden;
}
.parallax-pattern-overlay {
background-image:url(../img/pattern.png);
background-repeat: repeat;
}
&#13;