Header Style Sidenav

<header class="site-header mo-left header-transparent header-sidenav-1">
	<!-- main header -->
	<div class="sticky-header main-bar-wraper navbar-expand-lg">
		<div class="main-bar clearfix">
			<div class="container-fluid">
				<div class="header-content-bx">
					<!-- website logo -->
					<div class="logo-header logo-white">
						<a href="index.html"><img src="images/logo-white.png" alt=""></a>
					</div>
					<div class="service-list">
						<ul>
							<li>
								<i class="la la-phone"></i>
								<span>Make A Call</span>
								<h4 class="title">+1800-001-658</h4>
							</li>
							<li>
								<i class="la la-clock-o"></i>
								<span>Email Address</span>
								<h4 class="title">Website@info.com</h4>
							</li>
							<li>
								<i class="la la-map"></i>
								<span>Location</span>
								<h4 class="title">Envato Pty Ltd 13/2</h4>
							</li>
						</ul>
					</div>
					<div class="extra-nav">
						<div class="extra-cell">
							<ul>
								<li class="search-btn">
									<a href="javascript:void(0);" class="menu-btn">
										<span></span>
										<span></span>
										<span></span>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="header-nav navbar-collapse full-sidenav navbar">
						<div class="flsbg">
							<span class="bg-wrap">
								<span></span>
							</span>
							<span class="bg-wrap">
								<span></span>
							</span>
							<span class="bg-wrap">
								<span></span>
							</span>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-6">
									<div class="logo-header logo-dark">
										<a href="index.html"><img src="images/logo.png" alt=""></a>
									</div>
									<ul class="nav navbar-nav">	                                                                          
										<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-elements" class="header-tabs">Elements</a></li>
															<li><a href="javascript:void(0);" id="dz-feature" class="header-tabs active">Feature</a></li>
														</ul>
													</div>
													<div class="header-style-content text-center">
														<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 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>
												</div>
											</div>
										</li>
									</ul>
								</div>
								<div class="col-lg-6">
									<div class="service-list">
										<ul>
											<li>
												<i class="la la-phone"></i>
												<span>Make A Call</span>
												<h4 class="title">+1800-001-658</h4>
											</li>
											<li>
												<i class="far fa-envelope"></i>
												<span>Email Address</span>
												<h4 class="title">Website@info.com</h4>
											</li>
											<li>
												<i class="la la-map"></i>
												<span>Location</span>
												<h4 class="title">Envato Pty Ltd 13/2 Permanent <br> St Melbourne </h4>
											</li>
										</ul>
									</div>
									<div class="social-menu">
										<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>
				</div>
			</div>
		</div>
	</div>
	<!-- main header END -->
</header>