JSFiddle - React, Tailwind, and code Playground

by Dadi Hall

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <body>
    <header>
      <div class="container-fluid">
         <div class="row header-row">
           <div class="col-md-3 banner-logo text-center mx-auto my-auto">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>


  <div class="container-fluid nav-header" id="nav-wrapper">
    <div class="row">
      <div class="col-12">
        <nav class="navbar navbar-custom navbar-expand-md ">
          <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

  						<div class="collapse navbar-collapse" id="navbarDropdown">
  							<ul class="navbar-nav mx-auto">
  								<li class="nav-item ">
  									<a class="nav-link " href="#"> home</a>
  								</li>
                  <li class="nav-item ">
                    <a class="nav-link" href="#">Collections</a>
                  </li>
  								<li class="nav-item ">
  									<a class="nav-link" href="#">link</a>
  								</li>
  								<li class="nav-item ">
  									<a class="nav-link" href="#">link</a>
  								</li>
  								<li class="nav-item">
  									<a class="nav-link" href="#">link</a>
  								</li>
  							</ul>
  						</div>
            </nav> <!-- Navabar Handrit Ends -->

      </div>
    </div>
  </div>
<div class="container d-flex w-100">
  <div class="col content">
     <div class="row inst-spacer">

        <div class="col-lg-12 col-xl-12 ">


  ...

CSS

/* $background_color_2: rgba(0, 0, 0, 0);
 */
 body {
	 color: #4b4b4b;
}
 nav {
	 padding: 20px 0 20px;
	 margin-bottom: 20px;
	 margin-top: 20px;
}
 figure {
	 margin: 0;
}
 .bg-img {
	 background-size: cover;
	 background-position: 50% 50%;
	 background-repeat: no-repeat;
}
 .bg-img > img {
	 display: none;
}
 .header-row {
	 background-color: #c2002d;
	 border-bottom: 1px solid #d3d3d3;
}
 .bg-banner {
	 background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
	 background-size: cover;
	 background-position: 50% 50%;
	 background-repeat: no-repeat;
	 height: 15vh;
	 border-left: 5px solid #fff;
}
 .banner-logo {
	 background-color: #c2002d;
	 padding: 20px;
}
 .banner-logo a.brand-text {
	 text-decoration: none;
	 font-size: 2em;
	 color: #fff;
}
 .nav-header {
	 border-bottom: 1px solid #d3d3d3;
	 background-color: #fff;
	 z-index: 10000;
}
 .sticky {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
}
 @media (min-width: 768px) {
	 .nav-wrapper {
		 margin-top: 10vh;
		 border: none;
		 border-bottom: 1px solid #d3d3d3;
	}
}
 .navbar {
	 padding: 0;
}
 .navbar-toggler:active, .navbar-toggler:focus {
	 outline: none;
}
 .navbar-custom .navbar-toggler-icon {
	 width: 24px;
	 height: 17px;
	 background-image: none;
	 position: relative;
	 transition: all 300ms linear;
}
 .navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
	 width: 24px;
	 position: absolute;
	 height: 1px;
	 background-color: #000;
	 top: 0;
	 left: 0;
	 content: '';
	 z-index: 2;
	 transition: all 300ms linear;
}
 .navbar-custom .navbar-toggler-icon::after {
	 top: 8px;
}
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
	 transform: rotate(45deg);
}
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
	 transform: translateY(8px) rotate(-45deg);
}
 .navbar-toggler[aria-expanded="true"]...

JavaScript

$(window).scroll(function(){
  var stickyNav = $('.nav-header'),
  scroll = $(window).scrollTop();

  if (scroll >=100)
  {stickyNav.addClass('sticky');
   $('.nav-header').css("margin-top", "0");
}

  else {stickyNav.removeClass('sticky');
    $('.nav-header').css("margin-top", "1vh");
}
});

$(document).ready(function(){
	$('.bg-img').each(function() {
		var $el = $(this).find('> img');
		if ($el.length > 0) {
			$(this).css('background-image', 'url(' + $el.attr('src') + ')');
		}
	});


  $('.navbar-toggler-icon').on('click', function(e) {
		if (!$('html').hasClass('push')) {
			$('html').addClass('push');
		} else {
			$('html').removeClass('push');
		}
		e.preventDefault();

    console.log('its alive');
	});


});