Question

只有向下滚动约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 CODE位于

之下

     <!-- 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>

Answer 1

制作导航栏position:fixed。然后它永远不会移动。

导航栏未固定

1 个答案: