<div class="top-social">
    <div class="container nav-container">
      <ul class="list-inline text-right">
        <li class="list-inline-item"><a href="#"><i class="fab fa-facebook"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fab fa-facebook"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fab fa-facebook"></i></a></li>
        <li class="list-inline-item"><a href="#"><i class="fab fa-facebook"></i></a></li>

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

  <!-- ========================= SECTION CONTENT ========================= -->

  <nav id="navbar" class="navbar navbar-expand-lg navbar-dark sticky-top bg-primary">
    <div class="container nav-container">
      <a class="navbar-brand" href="#">logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="main_nav">

        <ul class="navbar-nav ml-auto">
          <li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>

          <li class="nav-item dropdown">
            <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">Shop</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
            </ul>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">Education</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">Local CBD Services</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">About Us</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 3 </a></li>
            </ul>
          </li>
        </ul>

        <!-- <ul class="navbar-nav ml-auto">
    <li class="nav-item text-center"><a class="nav-link" href="#">Cart $9.99 <i class="fas fa-shopping-cart"></i></a></li>
  </ul> -->
      </div> <!-- navbar-collapse.// -->
    </div><!-- container //  -->
  </nav>

  <div class="hero home-hero py-4 bg-light">
    <div class="hero-content">
      <div class="container nav-container">
        <div class="row h-100">
          <div class="col-md-8 offset-md-2  align-self-center">
            <h2>Lorem ipsum dolor sit amet</h2>
            <hr>
            <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</h1>
            <p class="text-center"><a class="btn btn-lg btn-outline-light" href="#">Learn More</a></p>
          </div>
        </div><!-- close row  -->
      </div>
    </div><!-- close hero-content -->
  </div><!-- close hero -->

  <main class="home" role="main">

    <section class="margin-1">
      <div class="container">
        <div class="row">
          <div class="col">

          </div><!-- close col -->
        </div><!-- close row -->
      </div><!-- close container -->
    </section>

    <section class="margin-1">
      <div class="container">
        <div class="row">
          <div class="col">

          </div><!-- close col -->
        </div><!-- close row -->
      </div><!-- close container -->
    </section>

    <section class="margin-1">
      <div class="container">
        <div class="row">
          <div class="col">

          </div><!-- close col -->
        </div><!-- close row -->
      </div><!-- close container -->
    </section>

    <section class="margin-1">
      <div class="container">
        <div class="row">
          <div class="col">

          </div><!-- close col -->
        </div><!-- close row -->
      </div><!-- close container -->
    </section>

  </main><!-- /.container -->

/* this element added by JS to act as the observer*/
.myObserver {
  height: 1px;
  width: 1px;
  pointer-events: none;
  position: absolute;
  z-index: -1;
  overflow: hidden;
}
.home-hero {
  background-image: url("https://via.placeholder.com/1920x1080.png");
  background-attachment: fixed;
}
.home-hero .hero-content .container {
  height: 760px;
}

.nav-container {
  max-width: 90%;
}
.top-social {
  text-align: right;
  background: rgba(118, 156, 191, 0.9);
}
.top-social ul {
  margin: 0;
  padding: 1rem 0;
}
.top-social img {
  width: 40px;
}
.fab {
  font-size: 30px;
}
.top-social li i.fa-facebook {
  color: #0274be;
  color: #fff;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
  background-color: #62b3e4;
  margin-top: 48px;
}
.navbar-expand-lg .navbar-nav .dropdown-menu li {
  border-top: solid 1px #ffffff;
  font-size: 18px;
}
.navbar-expand-lg .navbar-nav .dropdown-menu li:first-child {
  border-top: none;
}
.navbar-expand-lg .navbar-nav .dropdown-menu li a {
  padding: 12px 20px;
}
.dropdown-item:hover {
  color: #fff;
  text-decoration: none;
  background-color: #4295e8;
}

.navbar-dark .navbar-nav .nav-item a {
  font-size: 20px;
  color: #fff;
  padding: 0 30px;
}
.navbar-dark .navbar-nav .nav-item.active a {
  font-size: 20px;
  color: #e7b2a3;
}

.navbar-brand img {
  max-width: 100px;
}

.navbar-dark.bg-primary {
  background-color: rgba(118, 156, 191, 1) !important;
  background-image: none;
  transition: background 0.5s ease;
}
.navbar-dark.bg-primary.sticky-element {
  background-color: rgba(118, 156, 191, 0.5) !important;
}

/* end navbar*/
.hero {
}
.hero h1 {
  font-family: "Abhaya Libre", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: -0px;
  text-align: center;
  text-transform: none;
  font-style: normal;
  text-shadow: 1px 1px 0px #050100;
  color: #fff;
}

.hero h2 {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 55px;
  text-align: center;
  text-shadow: 1px 1px 0px #0a0600;
  color: #fff;
}

section {
  min-height: 400px;
}

@media screen and (max-width: 991.98px) {
  .sticky-top .navbar-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(118, 156, 191, 1);
  }
}

//based on : https://usefulangle.com/post/108/javascript-detecting-element-gets-fixed-in-css-position-sticky

(function(d) {
  "use strict";

  //lets add the observer element dynamically.
  var newEl = d.createElement("div");
  newEl.classList.add("myObserver");
  var ref = d.querySelector("#navbar");
  insertBefore(newEl, ref);
  function insertBefore(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode);
  }

  var observer = new IntersectionObserver(
    function(entries) {
      if (entries[0].intersectionRatio === 0)
        d.querySelector("#navbar").classList.add("sticky-element");
      else if (entries[0].intersectionRatio === 1)
        d.querySelector("#navbar").classList.remove("sticky-element");
    },
    { threshold: [0, 1] }
  );

 observer.observe(d.querySelector(".myObserver"));
})(document);