<div class="top-social">
    <div class="container nav-container">
      <ul class="list-inline text-right">
        <li class="list-inline-item"><a href="#"><img src="assets/img/icons/icon--facebook.png"></a></li>
        <li class="list-inline-item"><a href="#"><img src="assets/img/icons/icon--instagram.png"></a></li>
        <li class="list-inline-item"><a href="#"><img src="assets/img/icons/icon--twitter.png"></a></li>
        <li class="list-inline-item"><a href="#"><img src="assets/img/icons/icon--shopping-cart.png"></a></li>
      </ul>
    </div>
  </div>

  <nav id="sticky" class="navbar navbar-expand-lg navbar-dark sticky-top bg-primary">
    <div class="container nav-container">
      <a class="navbar-brand" href="index.html"><img src="https://via.placeholder.com/1500x150"></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="index.html">Home </a> </li>

          <li class="nav-item dropdown">
            <a class="nav-link  dropdown-toggle" href="shop.html" data-toggle="dropdown">Shop</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="shop.html"> Shop Template</a></li>
              <li><a class="dropdown-item" href="product.html"> product Template </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="blog.html"> Blog Template</a></li>
              <li><a class="dropdown-item" href="post.html"> Post Template </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="services.html" data-toggle="dropdown">Local CBD Services</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="services.html"> Services Template</a></li>
              <li><a class="dropdown-item" href="service.html"> Service Template</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="contact.html" data-toggle="dropdown">About Us</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="contact.html"> Contact</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 hero-neg 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</h2>
            <hr>
            <h1>Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing</h1>
            <p class="text-center mt-4"><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 -->



<p class="my-5">More Content</p>

<p class="my-5">More Content</p>

<p class="my-5">More Content</p>

<p class="my-5">More Content</p>

<p class="my-5">More Content</p>

<p class="my-5">More Content</p>

<p class="my-5">More Content</p>

<p class="my-5">More Content</p>
   

.nav-container{
	max-width: 90%;
	margin: 0 auto;
}
.top-social{
	text-align: right;
  /*background:rgba(118,156,191,.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{
	width: 100px;
}

.navbar-dark.bg-primary{
	background-color: rgba(118,156,191,0.8) !important;
    background-image: none;
}

/*nav after scrolling*/
.navbar-dark.bg-primary.fixed{
	background-color: rgba(118,156,191,.7) !important;
    background-image: none;
}
.fixed .navbar-brand img{
	width: 50px;
	transition: width .65s ease-in-out;
}
.fixed .navbar-brand{
	padding:0px;
}



/* end navbar*/




.hero{
	/* display: table;
	width: 100%;
	height: 80vh;
	min-height: 600px;*/
	background: url('https://via.placeholder.com/1800x1200');
    background-attachment:fixed;
    background-repeat:no-repeat !important;
	background-position: center center;
	background-size: cover !important;
}
.hero-neg{
	margin-top:-200px;
	
	height:960px;
}
.hero-neg .hero-content{
 padding-top:200px;
}

.hero h1{
	font-family: "Abhaya Libre", serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.5;
	letter-spacing: -0.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;	
}



.home-hero {
	background-image: url('https://via.placeholder.com/1800x1200');
}

.home-hero .hero-content .container{
	height:760px;
}

$(window).scroll(function(){
      if ($(this).scrollTop() > 200) {
         $('#sticky').addClass('fixed');
      } else {
         $('#sticky').removeClass('fixed');
      }
    });
  
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
  2. https://kit.fontawesome.com/033cc493cb.js
  3. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

External JavaScript

  1. https://kit.fontawesome.com/033cc493cb.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js