I am facing an issue with the navbar on my website - it sticks to the top when scrolling, but on Safari, it remains at the top by default. You can view the site here.
If you take a look at this safari browser image, you'll see what I mean.
Can someone help me figure out how to make it work like it does in other browsers? Here is the HTML and CSS code for the navbar:
.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>