JjjRWBx

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<!-- Search -->
	<div class="overlay"></div>
	<div class="search-input">
		<h6 class="mb-3 text-center text-white"><b>Feeling Stuck?</b> Search our Knowledge Base</h6>
		<div class="input-group">
			<input placeholder="search" class="search-input-styles" class="form-control" />
		</div>
	</div>
<!-- Seach -->


<div class="top-nav-full-width">
	<div class="d-flex top-nav-container mx-auto align-items-center justify-content-center">
		<div class="mx-5"></div>
		<div class="flex-fill">
			<h2 class="my-0 text-white font-weight-bold">HostGator</h2>
		</div>
		<div class="mx-4">
			<div class="cursor">
				<div class="font-weight-bold active-text-link dashboard-btn">Dashboard</div>
				<div class="active-border-btn mt-1 active dashboard-btn"></div>
			</div>
		</div>
		<div class="mx-4">
			<div class="cursor">
				<div class="font-weight-bold not-active-text-link marketplace-btn">Marketplace</div>
				<div class="active-border-btn mt-1 marketplace-btn"></div>
			</div>
		</div>

		<div class="mx-4">
			<div class="cursor">
				<div class="font-weight-bold not-active-text-link hosting-btn">Hosting</div>
				<div class="active-border-btn mt-1 hosting-btn"></div>
			</div>
		</div>
		<div class="mx-4">
			<div class="cursor">
				<div class="font-weight-bold not-active-text-link domain-btn">Domain</div>
				<div class="active-border-btn mt-1 domain-btn"></div>
			</div>
		</div>
		<div class="flex-fill"></div>
			<div class="d-flex align-items-center justify-content-center">
				<button class="material-icons search-btn mx-1 cursor text-white">search</button>
			</div>
		<div class="d-flex align-items-center justify-content-center">
			      <button class="material-icons message-btn mx-1 cursor text-white">question_answer</button>
		</div>
		<div class="d-flex align-items-center justify-content-center">
			 <button class="material-icons profile-btn ml-1 cursor text-white">person</button>
		</div>
				<div class="mx-5"></div>

	</div>
	
</div>

<div class="top-nav-header-full-width">
	<div class="container top-nav-header">
		<div class="row">
			<div class="col-12">
				<h1 class="font-weight-bold mt-5 mb-5 text-white">Hello, Kevin</h1>
				<h4 class="text-white">Hosting Package</h4>
			</div>
		</div>
	</div>
</div>

jjjrwbx.markdown

JjjRWBx

A Pen by Matthew Daniel Brown on CodePen.

License.

script.js

/* Search STARTS */
$('.search-btn').on('click', function(){
	$('.overlay').css({ display: 'block' });
	$('.search-input').css({ display: 'block' })
});

$('.overlay').on('click', function() {
		$('.overlay').css({ display: 'none' });
		$('.search-input').css({ display: 'none' })
});
/* Search ENDS */

$('.dashboard-btn').on('click', function(){
	$('.dashboard-btn').css({ opacity: 1 });
	$('.dashboard-btn').addClass('active');
	
	$('.marketplace-btn').removeClass('active');
	$('.marketplace-btn').css({ opacity: .6 });
	$('.hosting-btn').removeClass('active');
	$('.hosting-btn').css({ opacity: .6 });
	$('.domain-btn').removeClass('active');
	$('.domain-btn').css({ opacity: .6 });
});

$('.marketplace-btn').on('click', function() {
	$('.marketplace-btn').css({ opacity: 1 });
	$('.marketplace-btn').addClass('active');
	
	$('.dashboard-btn').removeClass('active');
	$('.dashboard-btn').css({ opacity: .6 });
	$('.hosting-btn').removeClass('active');
	$('.hosting-btn').css({ opacity: .6 });
	$('.domain-btn').removeClass('active');
	$('.domain-btn').css({ opacity: .6 });
});

$('.hosting-btn').on('click', function(){
	$('.hosting-btn').css({ opacity: 1 });
	$('.hosting-btn').addClass('active');
	
	$('.dashboard-btn').removeClass('active');
	$('.dashboard-btn').css({ opacity: .6 });
	$('.marketplace-btn').removeClass('active');
	$('.marketplace-btn').css({ opacity: .6 });
	$('.domain-btn').removeClass('active');
	$('.domain-btn').css({ opacity: .6 });
});

$('.domain-btn').on('click', function(){
	$('.domain-btn').css({ opacity: 1 });
	$('.domain-btn').addClass('active');
	
	$('.dashboard-btn').removeClass('active');
	$('.dashboard-btn').css({ opacity: .6 });
	$('.marketplace-btn').removeClass('active');
	$('.marketplace-btn').css({ opacity: .6 });
	$('.hosting-btn').removeClass('active');
	$('.hosting-btn').css({ opacity: .6 });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

style.scss

.top-nav-full-width {
	width:100%;
	height:64px;
	background:#0069FF;
	
	.top-nav-container {
		max-width:1440px;
		height:64px;
		.cursor {
			cursor:pointer;
		}
		
		.active-border-btn {
			border-bottom:2px solid transparent;
			width:30px;
			margin-left:auto;
			margin-right:auto;
		}
		.active {
			border-color:white;
		}
		.active-text-link {
			color:#fff;
			opacity: 1;
		}
		.not-active-text-link {
			color:#fff;
			opacity:.6;
		}
		.search-btn, .message-btn, .profile-btn {
			background:transparent;
			border:none;	
		}
	}
}

// Nav Header
.top-nav-header-full-width {
	width:100%;
	background:#0069FF;
	height:326px;
}

/* Search STARTS */
.overlay {
	position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85);
  z-index: 2;
  cursor: pointer;
}

.search-input {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	display:none;
	max-width:460px;
	height:81px;
	z-index:3;
}

.search-input-styles {
	padding:10px;
	width:460px;
	max-width:600px;
	background:#fff;
	text-indent: 10px;
	border-radius:4px;
	border:none;
}
/* Search ENDS */

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />