<div class="bs-header">
 
        <div class="bs-header-content flex-items">
         <div class="bs-top-header-content text-center">
            Important Safty Information &nbsp;&nbsp;  |   &nbsp;&nbsp;Full Prescribing Information  &nbsp;&nbsp;|  &nbsp;&nbsp;Patient Site
         </div>
       
    </div>
 
    <nav class="navbar navbar-expand-lg navbar-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.php"><img src="assets/images/logo.png" alt="LOGO"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0">
           
            <li class="nav-item dropdown">
              <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             About Dayvigo <img src="assets/images/Arrow_Down.png" alt="dropdown-arrow not found">
              </a>
              <ul class="dropdown-menu " aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="made-of-action.php">Made of Action</a></li>
               
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Safety <img src="assets/images/Arrow_Down.png" alt="dropdown-arrow not found">
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Efficacy <img src="assets/images/Arrow_Down.png" alt="dropdown-arrow not found">
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Resources <img src="assets/images/Arrow_Down.png" alt="dropdown-arrow not found">
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Expert Opinion <img src="assets/images/Arrow_Down.png" alt="dropdown-arrow not found">
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
              <li class="nav-item"><a class="nav__link bs-button bs-button-nav" href="#">Request A Rap</a></li>

            </ul>
       
        </div>
      </div>
    </nav>
     
</div>


.bs-header{
  .bs-header-content{
  align-items: center;
  background:#685bc7;
  width:100%;
  height:30px;
  position: relative;
  color:$clr-white;
  @media screen and (max-width: 768px) {
    height:70px;
  }
  .bs-top-header-content{
  font-size:12px;
  font-family: $fnt1;


  }
  }
  .navbar{
    align-items: center;
    background:$clr-white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
    padding: 6px 60px;
    @media screen and (max-width: 768px) {
    padding: 2px 20px;
    }
  }
  .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
   
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.5s;
  z-index: 99999;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.01rem;
}
 
  }


 





$(document).ready(function() {
     
$(window).bind('scroll', function () {
  if ($(window).scrollTop() >100) {
      $('.navbar').addClass('sticky');
  } else {
      $('.navbar').removeClass('sticky');
  }
});


 });