header.php

<header id="myHeader">
  <nav class="navbar navbar-expand-lg navbar-dark bg-transparent ">
<a class="navbar-brand" href="#"><img class="logo" src="assets/img/logo.png" alt="">		</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" >
  <li class="nav-item" id="index">
    <a class="nav-link"  href="index.php">HOME</a>
  </li>
  <li class="nav-item dropdown" id="about" >
    <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      ABOUT
    </a>
    <div class="dropdown-menu animate slideIn" aria-labelledby="navbarDropdown">
    <a class="nav-link" id="about_us" href="about.php">ABOUT US</a>
    <a class="nav-link" href="team.php" id="team">TEAM</a>
    </div>
  </li>
  <li class="nav-item " id="events">
    <a class="nav-link" href="events.php">EVENTS</a>
  </li>
  <li class="nav-item" id="gallery">
    <a class="nav-link" href="gallery.php">GALLERY</a>
  </li>
  <li class="nav-item" id="blog">
    <a class="nav-link" href="blog.php">BLOG</a>
  </li>
  <!-- <li class="nav-item" id="signup">
    <a class="nav-link" href="signup.php">SIGNUP</a>
  </li> -->
  <li class="nav-item" id="signin">
    <a class="nav-link" href="signin.php">SIGN IN</a>
  </li>
</ul>
</div>
</nav>
</header>
<script type="text/javascript">
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop+150;
function myFunction() {
if (window.pageYOffset > sticky) {
  header.classList.add("sticky-header");
} else {
  header.classList.remove("sticky-header");
}
}
</script>