I N D I R O .

# Header Style Middlebar

## Check Header Style 05

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm.

Copy

    <header class="site-header mo-left header style-5">
    	<div class="top-bar">
    		<div class="container">
    			<div class="dz-topbar-inner d-flex justify-content-between align-items-center">
    				<div class="dz-topbar-left">
    					<ul>
    						<li><i class="fas fa-envelope"></i> [email protected]</li>
    						<li><i class="fas fa-map-marker-alt"></i> 15/B Miranda House, New York, US</li>
    					</ul>
    				</div>
    				<div class="dz-topbar-right">
    					<ul class="dz-social">
    						<li><a target="_blank" class="fab fa-facebook-f" href="https://www.facebook.com/"></a></li>
    						<li><a target="_blank" class="fab fa-instagram" href="https://www.instagram.com/"></a></li>
    						<li><a target="_blank" class="fab fa-twitter" href="https://twitter.com/"></a></li>
    						<li><a target="_blank" class="fab fa-youtube" href="https://www.youtube.com/"></a></li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</div>

    	<div class="middle-bar bg-white">
    		<div class="container">
    			<!-- website logo  -->
    			<div class="middle-area">
    				<div class="logo-header logo-dark">
    					<a href="index.html"><img src="images/logo.png" alt=""></a>
    				</div>
    				<div class="extra-nav">
    					<div class="service-info">
    						<span>Office and Factory</span>
    						<h4 class="title">(+1) 123-456 7894</h4>
    					</div>
    					<a class="search-link" id="quik-search-btn" href="javascript:void(0);">
    						<i class="fas fa-search"></i>
    					</a>
    				</div>
    				<div class="dz-quik-search">
    					<form action="#">
    						<input name="search" value="" type="text" class="form-control" placeholder="Enter Your Keyword ...">
    						<span id="quik-search-remove"><i class="ti-close"></i></span>
    					</form>
    				</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 logo-white  d-md-block d-lg-none">
    					<a href="index.html"><img src="images/logo-white.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">
    						<a href="javascript:void(0);" class="btn btn-primary d-sm-inline-flex d-none btn-border btn-border-white m-r10 m-b10">REQUEST A QUOTE</a>
    					</div>
    				</div>
    				<!-- Extra Nav -->

    				<div class="header-nav navbar-collapse collapse justify-content-start" id="navbarNavDropdown">
    					<div class="logo-header ">
    						<a href="index.html"><img src="images/logo.png" alt=""></a>
    					</div>
    					<ul class="nav navbar-nav navbar navbar-left">
    						<li class="sub-menu-down"><a href="javascript:void(0);"><span>Home</span></a>
    							<ul class="sub-menu">
    								<li><a href="index.html">Home 1</a></li>
    								<li><a href="index-2.html">Home 2</a></li>
    								<li><a href="index-3.html">Home 3</a></li>
    								<li><a href="index-4.html">Home 4</a></li>
    								<li><a href="index-5.html">Home 5</a></li>
    							</ul>
    						</li>
    						<li class="has-mega-menu"><a href="javascript:void(0);">Pages</a>
    							<ul class="mega-menu">
    								<li><a href="javascript:void(0);">Pages</a>
    									<ul>
    										<li><a href="about-me.html">About Me</a></li>
    										<li><a href="about-me-2.html">About Me 2</a></li>
    										<li><a href="about-us.html">About Us</a></li>
    										<li><a href="about-us-2.html">About Us 2</a></li>
    										<li><a href="appointment.html">Appointment</a></li>
    									</ul>
    								</li>
    								<li> <a href="javascript:void(0);">Pages</a>
    									<ul>
    										<li><a href="coming-soon.html">Coming Soon</a></li>
    										<li><a href="company-history.html">Company History</a></li>
    										<li><a href="company-history-2.html">Company History 2</a></li>
    										<li><a href="contact-us.html">Contact Us</a></li>
    										<li><a href="error-404.html">Error 404</a></li>
    									</ul>
    								</li>
    								<li> <a href="javascript:void(0);">Pages</a>
    									<ul>
    										<li><a href="gallery-grid-2.html">Gallery Grid 2</a></li>
    										<li><a href="gallery-grid-3.html">Gallery Grid 3</a></li>
    										<li><a href="gallery-grid-4.html">Gallery Grid 4</a></li>
    										<li><a href="gallery-masonry.html">Gallery Masonry</a></li>
    										<li><a href="help-desk.html">Help Desk</a></li>
    									</ul>
    								</li>
    								<li> <a href="javascript:void(0);">Pages</a>
    									<ul>
    										<li><a href="pricing.html">Pricing Table</a></li>
    										<li><a href="privacy-policy.html">Privacy Policy</a></li>
    										<li><a href="services.html">Services</a></li>
    										<li><a href="team.html">Team</a></li>
    										<li><a href="under-construct.html">Under Construct</a></li>
    									</ul>
    								</li>
    							</ul>
    						</li>
    						<li class="sub-menu-down"><a href="javascript:void(0);"><span>Portfolio</span></a>
    							<ul class="sub-menu">
    								<li><a href="portfolio.html">Portfolio 1</a></li>
    								<li><a href="portfolio-2.html">Portfolio 2</a></li>
    								<li><a href="portfolio-3.html">Portfolio 3</a></li>
    								<li><a href="portfolio-4.html">Portfolio 4</a></li>
    								<li><a href="portfolio-collage.html">Portfolio Collage</a></li>
    								<li><a href="portfolio-film-strip.html">Portfolio Film Strip</a></li>
    								<li><a href="portfolio-split-slider.html">Portfolio Split Slider</a></li>
    								<li><a href="portfolio-details.html">Portfolio Details</a></li>
    								<li><a href="portfolio-details-2.html">Portfolio Details 2</a></li>
    							</ul>
    						</li>
    						<li class="sub-menu-down"><a href="javascript:void(0);"><span>Shop</span></a>
    							<ul class="sub-menu">
    								<li><a href="shop-grid-3.html">Shop Grid 3</a></li>
    								<li><a href="shop-grid-sidebar.html">Shop Grid Sidebar</a></li>
    								<li><a href="product-details.html">Product Details</a></li>
    								<li><a href="shop-wishlist.html">Wishlist</a></li>
    								<li><a href="shop-checkout.html">Checkout</a></li>
    								<li><a href="shop-cart.html">Cart</a></li>
    								<li><a href="login.html">Login</a></li>
    							</ul>
    						</li>
    						<li class="sub-menu-down"><a href="javascript:void(0);"><span>Blog</span></a>
    							<ul class="sub-menu">
    								<li><a href="blog-grid.html">Blog Grid</a></li>
    								<li><a href="blog-large-right-sidebar.html">Blog Right Sidebar</a></li>
    								<li><a href="blog-list-sidebar.html">Blog List Sidebar</a></li>
    								<li><a href="blog-list-left-sidebar.html">Blog List Left Sidebar</a></li>
    								<li><a href="blog-details-post-wide.html">Post Wide View</a></li>
    								<li><a href="blog-details.html">Blog Details</a></li>
    							</ul>
    						</li>
    						<li class="has-mega-menu header-tabs-wraper">
    							<a href="javascript:void(0);">Features</a>
    							<div class="mega-menu">
    								<div class="header-style-bx">
    									<div class="header-style-tabs">
    										<ul>
    											<li><a href="javascript:void(0);" id="dz-feature" class="header-tabs active">Feature</a></li>
    											<li><a href="javascript:void(0);" id="dz-elements" class="header-tabs">Elements</a></li>
    										</ul>
    									</div>
    									<div class="header-style-content text-center">
    										<div id="feature" class="header-tabs-content show">
    											<ul class="menu-list">
    												<li>
    													<span class="title">Header</span>
    													<ul>
    														<li><a href="header-1.html">Header 1</a></li>
    														<li><a href="header-2.html">Header 2</a></li>
    														<li><a href="header-3.html">Header 3</a></li>
    														<li><a href="header-4.html">Header 4</a></li>
    														<li><a href="header-5.html">Header 5</a></li>
    														<li><a href="header-6.html">Header 6</a></li>
    													</ul>
    												</li>
    												<li>
    													<span class="title">Banner</span>
    													<ul>
    														<li><a href="banner-1.html">Banner 1</a></li>
    														<li><a href="banner-2.html">Banner 2</a></li>
    														<li><a href="banner-3.html">Banner 3</a></li>
    														<li><a href="banner-4.html">Banner 4</a></li>
    														<li><a href="banner-5.html">Banner 5</a></li>
    													</ul>
    												</li>
    												<li>
    													<span class="title">Footer</span>
    													<ul>
    														<li><a href="footer-1.html">Footer 1</a></li>
    														<li><a href="footer-2.html">Footer 2</a></li>
    														<li><a href="footer-3.html">Footer 3</a></li>
    														<li><a href="footer-4.html">Footer 4</a></li>
    														<li><a href="footer-5.html">Footer 5</a></li>
    													</ul>
    												</li>
    											</ul>
    										</div>
    										<div id="elements" class="header-tabs-content">
    											<ul class="menu-list">
    												<li>
    													<span class="title">Element</span>
    													<ul>
    														<li><a href="element-buttons.html"><i class="ti-mouse"></i> Buttons</a></li>
    														<li><a href="element-iconbox.html"><i class="ti-layout-grid2"></i> Icon box styles</a></li>
    														<li><a href="element-team.html"><i class="ti-user"></i> Team</a></li>
    														<li><a href="element-list-group.html"><i class="ti-list"></i> List group</a></li>
    														<li><a href="element-about.html"><i class="ti-clipboard"></i> About</a></li>
    													</ul>
    												</li>
    												<li>
    													<span class="title">Element</span>
    													<ul>
    														<li><a href="element-accordion.html"><i class="ti-layout-accordion-list"></i> Accordians</a></li>
    														<li><a href="element-alert.html"><i class="ti-alert"></i> Alert box</a></li>
    														<li><a href="element-typhography.html"><i class="ti-layout-grid2-thumb"></i> Typhography</a></li>
    														<li><a href="element-blog.html"><i class="ti-check-box"></i> Blogs</a></li>
    														<li><a href="element-progress.html"><i class="ti-notepad"></i> Progress Bar</a></li>
    													</ul>
    												</li>
    												<li>
    													<span class="title">Element</span>
    													<ul>
    														<li><a href="element-counter.html"><i class="ti-timer"></i> Counters</a></li>
    														<li><a href="element-pagination.html"><i class="ti-more"></i> Pagination</a></li>
    														<li><a href="element-testimonials.html"><i class="ti-comments"></i> Testimonials</a></li>
    														<li><a href="element-imagebox.html"><i class="ti-image"></i> Image box content</a></li>
    														<li><a href="element-tab.html"><i class="ti-layout-tab-window"></i> Tabs</a></li>
    													</ul>
    												</li>
    												<li>
    													<span class="title">Element</span>
    													<ul>
    														<li><a href="element-dividers.html"><i class="ti-layout-list-post"></i> Dividers</a></li>
    														<li><a href="element-modal.html"><i class="ti-layers"></i> Modal</a></li>
    														<li><a href="element-popover.html"><i class="ti-comment"></i> Popover</a></li>
    														<li><a href="element-table.html"><i class="ti-view-list"></i> Table</a></li>
    														<li><a href="element-widget.html"><i class="ti-layout-grid2"></i> Widgets</a></li>
    													</ul>
    												</li>
    											</ul>
    										</div>
    									</div>
    								</div>
    							</div>
    						</li>
    					</ul>
    					<div class="dz-social-icon">
    						<ul>
    							<li><a class="fab fa-facebook-f" href="https://www.facebook.com/"></a></li>
    							<li><a class="fab fa-twitter" href="https://twitter.com/?lang=en"></a></li>
    							<li><a class="fab fa-linkedin-in" href="https://www.linkedin.com/"></a></li>
    							<li><a class="fab fa-instagram" href="https://www.instagram.com/?hl=en"></a></li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<!-- Main Header End -->
    </header>

### SIGN UP TO GET LATEST UPDATES