只有当您向下滚动大约 200 像素左右时，我的导航栏才会出现。无论如何，我真的希望导航栏始终保持在顶部并且永远不会消失!
谁能告诉我要编辑掉 CSS 代码的哪一部分？
nav #logo {
float:left;
z-index: 99999;}
nav {
z-index: 999;
width: 100%;
height: 80px;}
/* Some stylesheet reset */
#nav, #nav ul {
list-style: none;
margin: 0;
padding: 0;}
/* The main navigation bar */
#nav {
width: 100%; /* The menu will take the width of its container */}
#nav>li {
float: right;
position: relative;
padding: 10px 0;}
/* The main navigation links */
#nav>li>a {
/* Layout */
display: block;
padding: 0px 0px 0 30px;
/* Typography */
font-family: 'latolight', sans-serif;
font-size: 16px;
color: #999;
text-decoration: none;
/* Transitions */
-webkit-transition: color .2s ease-in, border-top-color .2s ease-in;
-ms-transition: color .2s ease-in, border-top-color .2s ease-in;
-moz-transition: color .2s ease-in, border-top-color .2s ease-in;
-o-transition: color .2s ease-in, border-top-color .2s ease-in;
transition: color .2s ease-in, border-top-color .2s ease-in;}
/* The hover state of the links */
#nav li:hover a, #nav li .selected {
color: #1f2325;}
/* Navigation Fixed */
.cbp-af-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #FFF;
z-index: 999999;
height: 0px;
border-bottom: 0px solid #e5e5e5;
overflow: hidden;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
transition: height 0.6s;}
/* FOR REDUCING THE HEIGHT OF THE NAVIGATION */
.cbp-af-header #logo {
padding:25px 20px 0px 0px;
} /* i took out width:110px; */
.cbp-af-header #nav a {
line-height: 60px;}
.cbp-af-header.cbp-af-header-shrink #logo {
padding:25px 20px 0px 0px;
} /* i took out width:110px; */
/* Transitions and class for reduced height */
.cbp-af-header #logo,
.cbp-af-header #nav a {
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
transition: all 0.6s;}
.cbp-af-header.cbp-af-header-shrink {
height: 80px;
border-bottom: 1px solid #e5e5e5;}
.cbp-af-header.cbp-af-header-shrink #nav a {
line-height: 60px;}
/* Header Generals */
#header {
width:100%;
height:600px;
color:#FFF;
background:url('http://www.placehold.it/1600x1200') #363f48 fixed;
z-index: 999998;
position: relative;
background-size: 100%;}
#header .twelve.columns {
margin-top:10%;
text-align: left; }
#header .logo {
width: 100%; }
#header h2 {
padding:20px 0; }
/* Social Share Button */
.social-stuff {
padding:20px 0;}
HTML代码如下
<!-- Stylesheets /-->
<link rel="stylesheet" href="css/gumby.css"> <!-- Gumby Framework /-->
<link rel="stylesheet" href="css/style.css"> <!-- Main stylesheet /-->
<link rel="stylesheet" href="css/component.css"> <!-- Flexslider - Thumbs Icon /-->
</head>
<body>
<div class="mobile-menu">
<section id="collapse">
<div class="row">
<div class="mobile-menu-inner">
<ul class="nav-mobile">
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</section>
<a href="#" id="collapse-menu"><img src="img/menu.png" alt="MENU ICON"></a>
</div>
<!-- Menu -->
<div class="cbp-af-header">
<nav class="row">
<div id="logo"><a href="#"><img alt="Rendezvous Logo" src="img/Rendezvous_website_logo.jpg"></a></div>
<ul id="nav">
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
最佳答案
使导航栏position:fixed。然后它永远不会移动。
关于html - 导航栏不固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20277670/