Header Style Topbar Primary

<header class="site-header mo-left header ext-header">
  <div class="top-bar">
	<div class="container">
	  <div class="row d-flex justify-content-between align-items-center">
		<div class="dlab-topbar-left">
		  <ul>
			<li><a href="javascript:void(0);">About Us</a></li>
			<li><a href="javascript:void(0);">Refund Policy</a></li>
			<li><a href="javascript:void(0);">Help Desk</a></li>
		  </ul>
		</div>
		<div class="dlab-topbar-right">
		  <a href="javascript:void(0);" class="site-button radius-no">GET A QUOTE</a>            
		</div>
	  </div>
	</div>
  </div>
  <div class="middle-bar bg-white">
	<div class="container">
	  <!-- website logo  -->
	  <div class="middle-area">
		<div class="logo-header">
		  <a href="/index/"><img src="/static/industry/images/logo.png" alt=""></a>
		</div>
		<div class="service-list">
		  <ul>
			<li>
			  <i class="la la-phone"></i>
			  <h4 class="title">(+00)888.666.88</h4>
			  <span>Free Call</span>
			</li>
			<li>
			  <i class="la la-clock-o"></i>
			  <h4 class="title">08:00 AM - 06:00 PM</h4>
			  <span>Monday - Friday</span>
			</li>
			<li>
			  <i class="la la-map"></i>
			  <h4 class="title">183 Donato Parkways</h4>
			  <span>CA, United State</span>
			</li>
		  </ul>
		</div>
	  </div>
	  
	</div>
  </div>  
  <!-- main header -->
  <div class="sticky-header main-bar-wraper navbar-expand-lg">
	<div class="main-bar clearfix ">
	  <div class="container clearfix">
		<!-- website logo -->
		<div class="logo-header mostion">
		  <a href="/index/"><img src="/static/industry/images/logo.png" alt=""></a>
		</div>
		<!-- nav toggle button -->
		<button class="navbar-toggler collapsed navicon justify-content-end" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
		  <span></span>
		  <span></span>
		  <span></span>
		</button>
		<!-- extra nav -->
		<div class="extra-nav">
		  <div class="extra-cell">
			<button id="quik-search-btn" type="button" class="site-button-link"><i class="la la-search"></i></button>
			<div class="shop-cart navbar-right">
			  <button type="button" class="site-button-link cart-btn">
				<i class="la la-cart-plus"></i><span class="badge bg-primary">3</span>
			  </button>
			  <ul class="dropdown-menu cart-list">
				<li class="cart-item">
				  <div class="media"> 
					<div class="media-left"> 
					  <a href="javascript:void(0);"> 
						<img alt="" class="media-object" src="/static/industry/images/product/thumb3.jpg"> 
					  </a> 
					</div> 
					<div class="media-body"> 
					  <h6><a href="" class="media-heading">Tshirt Dress</a></h6>
					  <span>$19.99</span>
					  <span class="item-close">X</span>
					</div> 
				  </div>
				</li>
				<li class="cart-item">
				  <div class="media"> 
					<div class="media-left"> 
					  <a href="javascript:void(0);"> 
						<img alt="" class="media-object" src="/static/industry/images/product/thumb2.jpg"> 
					  </a> 
					</div> 
					<div class="media-body"> 
					  <h6><a href="" class="media-heading">Tshirt Dress</a></h6>
					  <span>$19.99</span>
					  <span class="item-close">X</span>
					</div> 
				  </div>
				</li>
				<li class="cart-item">
				  <div class="media"> 
					<div class="media-left"> 
					  <a href="javascript:void(0);"> 
						<img alt="" class="media-object" src="/static/industry/images/product/thumb1.jpg"> 
					  </a> 
					</div> 
					<div class="media-body"> 
					  <h6><a href="" class="media-heading">Tshirt Dress</a></h6>
					  <span>$19.99</span>
					  <span class="item-close">X</span>
					</div> 
				  </div>
				</li>
				<li class="cart-item text-center">
				  <h5 class="text-black m-a0">Totle = $500</h5>
				</li>
				<li class="text-center">
				  <button class="site-button radius-xl m-r5">View Cart</button>
				  <button class="site-button radius-xl outline black">Checkout</button>
				</li>
			  </ul>
			</div>
		  </div>
		</div>
		<!-- Quik search -->
		<div class="dlab-quik-search ">
		  <form action="#">
			<input name="search" value="" type="text" class="form-control" placeholder="Type to search">
			<span id="quik-search-remove"><i class="ti-close"></i></span>
		  </form>
		</div>
		<!-- main nav -->
		<div class="header-nav navbar-collapse collapse justify-content-start" id="navbarNavDropdown">
		  <div class="logo-header d-md-block d-lg-none">
			<a href="/index/"><img src="/static/industry/images/logo.png" alt=""></a>
		  </div>
		  <ul class="nav navbar-nav">  
			<li class="active"> <a href="javascript:void(0);">Home<i class="fas fa-chevron-down"></i></a>
			  <ul class="sub-menu">
				<li><a href="/index/">Home - Default</a> </li>
				<li><a href="/index-2/">Home - Oil/Gas Plant</a></li>
				<li><a href="/index-3/">Home - Steel Plant</a></li>
				<li><a href="/index-4/">Home - Factory</a></li>
			  </ul>
			</li>
			<li>
			  <a href="javascript:void(0);">Features<i class="fas fa-chevron-down"></i></a>
			  <ul class="sub-menu tab-content">
				<li>
				  <a href="javascript:void(0);">Header Light <i class="fas fa-angle-right"></i></a>
				  <ul class="sub-menu">
					<li><a href="/header-style-1/">Header 1</a></li>
					<li><a href="/header-style-2/">Header 2</a></li>
					<li><a href="/header-style-3/">Header 3</a></li>
					<li><a href="/header-style-4/">Header 4</a></li>
					<li><a href="/header-style-5/">Header 5</a></li>
				  </ul>
				</li>  
				<li> 
				  <a href="javascript:void(0);">Header Dark <i class="fas fa-angle-right"></i></a>
				  <ul class="sub-menu">    
					<li><a href="/header-style-dark-1/">Header 1</a></li>
					<li><a href="/header-style-dark-2/">Header 2</a></li>
					<li><a href="/header-style-dark-3/">Header 3</a></li>
					<li><a href="/header-style-dark-4/">Header 4</a></li>
					<li><a href="/header-style-dark-5/">Header 5</a></li>
				  </ul>
				</li>
				<li> 
				  <a href="javascript:void(0);">Footer <i class="fas fa-angle-right"></i></a>
				  <ul class="sub-menu">
					<li><a href="/footer-1/">Footer 1 </a></li>
					<li><a href="/footer-2/">Footer 2</a></li>
					<li><a href="/footer-3/">Footer 3</a></li>
					<li><a href="/footer-4/">Footer 4</a></li>
					<li><a href="/footer-5/">Footer 5</a></li>
					<li><a href="/footer-6/">Footer 6</a></li>
					<li><a href="/footer-7/">Footer 7</a></li>
					<li><a href="/footer-8/">Footer 8</a></li>
					<li><a href="/footer-9/">Footer 9</a></li>
					<li><a href="/footer-10/">Footer 10</a></li>
					<li><a href="/footer-11/">Footer 11</a></li>
					<li><a href="/footer-12/">Footer 12</a></li>
				  </ul>
				</li>
			  </ul>
			</li>
			<li class="has-mega-menu"> <a href="javascript:void(0);">Pages<i class="fas fa-chevron-down"></i></a>
			  <ul class="mega-menu">
				<li> 
				  <a href="javascript:void(0);">Pages</a>
				  <ul>
					<li><a href="/about-us-1/">About us 1</a></li>
					<li><a href="/about-us-2/">About us 2</a></li>
					<li><a href="/services-1/">Services 1</a></li>
					<li><a href="/services-2/">Services 2</a></li>
					<li><a href="/services-details/">Services Details</a></li>
				  </ul>
				</li>
				<li> 
				  <a href="javascript:void(0);">Pages</a>
				  <ul>
					<li><a href="/team-1/">Team 1</a></li>
					<li><a href="/team-2/">Team 2</a></li>
					<li><a href="/faq-1/">Faqs 1</a></li>
					<li><a href="/faq-2/">Faqs 2</a></li>
					<li><a href="/portfolio-grid-2/">portfolio Grid 2</a></li>
				  </ul>
				</li>
				<li> 
				  <a href="javascript:void(0);">Pages</a>
				  <ul>
					<li><a href="/portfolio-grid-3/">Portfolio Grid 3</a></li>
					<li><a href="/portfolio-grid-4/">Portfolio Grid 4</a></li>
					<li><a href="/portfolio-details/">Portfolio Details</a></li>
					<li><a href="/error-403/">Error 403</a></li>
					<li><a href="/error-404/">Error 404</a></li>
				  </ul>
				</li>
				<li> 
				  <a href="javascript:void(0);">Pages</a>
				  <ul>
					<li><a href="/error-405/">Error 405</a></li>
					<li><a href="/coming-soon-1/">Coming Soon 1</a></li>
					<li><a href="/coming-soon-2/">Coming Soon 2</a></li>
					<li><a href="/help-desk/">Help Desk</a></li>
					<li><a href="/privacy-policy/">Privacy Policy</a></li>
				  </ul>
				</li>
			  </ul>
			</li>
			<li>
			  <a href="javascript:void(0);">Shop<i class="fas fa-chevron-down"></i></a>
			  <ul class="sub-menu">
				<li><a href="/shop/">Shop</a></li>
				<li><a href="/shop-sidebar/">Shop Sidebar</a></li>
				<li><a href="/shop-product-details/">Product Details</a></li>
				<li><a href="/shop-cart/">Cart</a></li>
				<li><a href="/shop-wishlist/">Wishlist</a></li>
				<li><a href="/shop-checkout/">Checkout</a></li>
				<li><a href="/shop-login/">Login</a></li>
				<li><a href="/shop-register/">Register</a></li>
			  </ul>
			</li>
			<li class="has-mega-menu"> <a href="javascript:void(0);">Blog<i class="fas fa-chevron-down"></i></a>
			  <ul class="mega-menu">
				<li> <a href="javascript:void(0);">Blog</a>
				  <ul>
					<li><a href="/blog-half-img/">Half image</a></li>
					<li><a href="/blog-half-img-sidebar/">Half image sidebar</a></li>
					<li><a href="/blog-half-img-left-sidebar/">Half image sidebar left</a></li>
					<li><a href="/blog-large-img/">Large image</a></li>
				  </ul>
				</li>
				<li> <a href="javascript:void(0);">Blog</a>
				  <ul>
					<li><a href="/blog-large-img-sidebar/">Large image sidebar</a></li>
					<li><a href="/blog-large-img-left-sidebar/">Large image sidebar left</a></li>
					<li><a href="/blog-grid-2/">Grid 2</a></li>
					<li><a href="/blog-grid-2-sidebar/">Grid 2 sidebar</a></li>
				  </ul>
				</li>
				<li> <a href="javascript:void(0);">Blog</a>
				  <ul>
					<li><a href="/blog-grid-2-sidebar-left/">Grid 2 sidebar left</a></li>
					<li><a href="/blog-grid-3/">Grid 3</a></li>
					<li><a href="/blog-grid-3-sidebar/">Grid 3 sidebar</a></li>
					<li><a href="/blog-grid-3-sidebar-left/">Grid 3 sidebar left</a></li>
				  </ul>
				</li>
				<li> <a href="javascript:void(0);">Blog</a>
				  <ul>
					<li><a href="/blog-grid-4/">Grid 4</a></li>
					<li><a href="/blog-single/">Single</a></li>
					<li><a href="/blog-single-sidebar/">Single sidebar</a></li>
					<li><a href="/blog-single-left-sidebar/">Single sidebar right</a></li>
				  </ul>
				</li>
			  </ul>
			</li>
			<li class="has-mega-menu"> <a href="javascript:void(0);">Element<i class="fas fa-chevron-down"></i></a>
			  <ul class="mega-menu">
				<li><a href="javascript:void(0);">Element</a>
				  <ul>
					<li><a href="/shortcode-buttons/"><i class="ti-mouse"></i> Buttons</a></li>
					<li><a href="/shortcode-icon-box-styles/"><i class="ti-layout-grid2"></i> Icon box styles</a></li>
					<li><a href="/shortcode-pricing-table/"><i class="ti-layout-grid2-thumb"></i> Pricing table</a></li>
					<li><a href="/shortcode-toggles/"><i class="ti-layout-accordion-separated"></i> Toggles</a></li>
					<li><a href="/shortcode-team/"><i class="ti-user"></i> Team</a></li>
					<li><a href="/shortcode-animation-effects/"><i class="ti-layers-alt"></i> Animation Effects</a></li>
				  </ul>
				</li>
				<li> <a href="javascript:void(0);">Element</a>
				  <ul>
					<li><a href="/shortcode-carousel-sliders/"><i class="ti-layout-slider"></i> Carousel sliders</a></li>
					<li><a href="/shortcode-image-box-content/"><i class="ti-image"></i> Image box content</a></li>
					<li><a href="/shortcode-tabs/"><i class="ti-layout-tab-window"></i> Tabs</a></li>
					<li><a href="/shortcode-counters/"><i class="ti-timer"></i> Counters</a></li>
					<li><a href="/shortcode-shop-widgets/"><i class="ti-shopping-cart"></i> Shop Widgets</a></li>
					<li><a href="/shortcode-filters/"><i class="ti-check-box"></i> Gallery Filters</a></li>
				  </ul>
				</li>
				<li> <a href="javascript:void(0);">Element</a>
				  <ul>
					<li><a href="/shortcode-accordians/"><i class="ti-layout-accordion-list"></i> Accordians</a></li>
					<li><a href="/shortcode-dividers/"><i class="ti-layout-list-post"></i> Dividers</a></li>
					<li><a href="/shortcode-images-effects/"><i class="ti-layout-media-overlay"></i> Images effects</a></li>
					<li><a href="/shortcode-testimonials/"><i class="ti-comments"></i> Testimonials</a></li>
					<li><a href="/shortcode-pagination/"><i class="ti-more"></i> Pagination</a></li>
					<li><a href="/shortcode-alert-box/"><i class="ti-alert"></i> Alert box</a></li>
				  </ul>
				</li>
				<li> <a href="javascript:void(0);">Element</a>
				  <ul>
					<li><a href="/shortcode-icon-box/"><i class="ti-layout-media-left-alt"></i> Icon Box</a></li>
					<li><a href="/shortcode-list-group/"><i class="ti-list"></i> List group</a></li>
					<li><a href="/shortcode-title-separators/"><i class="ti-layout-line-solid"></i> Title Separators</a></li>
					<li><a href="/shortcode-all-widgets/"><i class="ti-widgetized"></i> Widgets</a></li>
					<li><a href="/shortcode-carousel-sliders/"><i class="ti-layout-slider"></i> Carousel sliders</a></li>
					<li><a href="/shortcode-image-box-content/"><i class="ti-image"></i> Image box content</a></li>
				  </ul>
				</li>
			  </ul>
			</li>
			<li>
			  <a href="javascript:void(0);">Contact Us<i class="fas fa-chevron-down"></i></a>
			  <ul class="sub-menu">
				<li><a href="/contact-us-1/">Contact us 1</a></li>
				<li><a href="/contact-us-2/">Contact us 2</a></li>
				<li><a href="/contact-us-3/">Contact us 3</a></li>
				<li><a href="/contact-us-4/">Contact us 4</a></li>
			  </ul>
			</li>
		  </ul>  
		</div>
	  </div>
	</div>
  </div>
  <!-- main header END -->
</header>