bootstrap navbar klebt standardmäßig im Safari Browser

Question

Ich setze die Navigationsleiste meiner Seite so, dass sie nur beim Scrollen oben bleibt. Aber es bleibt standardmäßig auf der Safari an der Spitze. Hier ist meine Website: krishagric.com

safari browser image

Wie kann ich es beheben wie andere Browser zu arbeiten. Hier ist die navbar HTML und CSS-Code:

.navbar { 
 
    background-color: white; 
 
    border: none; 
 
    margin: none; 
 
} 
 
.sticky { 
 
    position: sticky; 
 
    top: 5px; /* When the element reaches top: 5px, it becomes fixed. */ 
 
    z-index: 100; 
 
}

<nav class="navbar navbar-default navbar-fixed-top sticky" role="navigation"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="index.html">Home</a></li> 
 
       <li><a href="about.html">About</a></li> 
 
       <li><a href="consultation.html">Consultation</a></li> 
 
       <li><a href="gallery.html">Gallery</a></li> 
 
       <li><a href="contact.html">Contact</a></li> 
 
      </ul> 
 
      </div><!--/.nav-collapse --> 
 
     </div><!--/.container-fluid --> 
 
     </nav>

Answer 1

Safari braucht ein wenig mehr Liebe hier (Name Vorfixierung). So zu .sticky hinzufügen:

position: -webkit-sticky;