Navigationsleiste in HTML-Formatierung Ausgabe

Question

Webseite Quelle: http://www.salefee.com/

Ich habe eine Navigationsleiste auf meiner Website. Ich habe es mit css.While auf der ersten Seite formatiert, Es scheint normal. Aber wenn ich zu einem anderen Abschnitt navigiere, kann ich einen Schnitt auf beiden Seiten einer Navigationsleiste beobachten. Ich konnte das Problem nicht herausfinden. Der Code und Screenshots sind wie unten angegeben:

<!-- NAVBAR --> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <!-- Brand and Toggle --> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#anch-top"><img src="images/logo.PNG" style="height:45px; width:60px;">Salefee</a> 
      </div> 
      <!-- End Brand and Toggle --> 
      <!-- Menu --> 
      <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active" data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <a href="#anch-top" style="text-transform: uppercase;font-family: Sans-Serif">Home</a> 
       </li> 


       <li data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <a href="#anch-gallery" style="text-transform: uppercase;font-family: Sans-Serif">Gallery</a> 
       </li> 

       <li data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <a href="#anch-pricing" style="text-transform: uppercase;font-family: Sans-Serif"><marquee direction=right behavior=alternate width=65><super>STORY</super></marquee></a> 
       </li> 




       <li data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <a href="#anch-team" style="text-transform: uppercase;font-family: Sans-Serif">Team</a> 
       </li> 

       <li data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <a href="#anch-contact" style="text-transform: uppercase;font-family: Sans-Serif">Contact</a> 
       </li> 

       <li data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <a href="jobs" style="font-family: Sans-Serif">JOBS</a> 

       <li data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <a href="blog" target="_blank" style="font-family: Sans-Serif">BLOG</a> 
       </li> 
      </ul> 
      </div> 
      <!-- End Menu --> 
     </div> 
     </nav> 

Screenshot 1: (normal)

Screenshot 2: (Problem)

Bitte helfen Sie mir mit dem Code heraus .. .Danke im Voraus!!

Answer 1

einfach auf Ihre CSS-Datei setzen:

.navbar.affix{ height: 52px;} 

und

div#navbar-collapse-1 { 
min-width: 100%; 
} 

diese Weise ist es auch anspricht, und es passt perfekt alle Rasterweiten

Answer 2

Sie Höhe angegeben haben, an. navbar.affix Klasse in CSS. Sie sollten den Eigenschaftswert der Höhe 51px machen. Sie werden sehen, dass das Problem behoben wird.

.navbar.affix { 
    position: fixed; 
    top: 0; 
    height: 51px; 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -ms-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
} 

Answer 3

Sie haben Stil für .navbar.affix wo Höhe Satz 46px auf allen Seiten außer Homepage, ich denke, Sie sollten Höhe Eigenschaft entfernen und fügen Sie einfach unten: auto;