Header Style Overlay

<!-- header -->
<header class="site-header mo-left header-transparent overlay header">
<!-- 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="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">
                    <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="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="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="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-end" id="navbarNavDropdown">
                <div class="logo-header d-md-block d-lg-none">
                    <a href="index"><img src="images/logo.png" alt=""></a>
                </div>
                <ul class="nav navbar-nav">	
                    <li class="active"> <a href="javascript:;">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:;">Features<i class="fas fa-chevron-down"></i></a>
                        <ul class="sub-menu tab-content">
                            <li>
                                <a href="javascript:;">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:;">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:;">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:;">Pages<i class="fas fa-chevron-down"></i></a>
                        <ul class="mega-menu">
                            <li> 
                                <a href="javascript:;">Pages</a>
                                <ul>
                                    <li><a href="about-1">About us 1</a></li>
                                    <li><a href="about-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:;">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:;">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:;">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:;">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:;">Blog<i class="fas fa-chevron-down"></i></a>
                        <ul class="mega-menu">
                            <li> <a href="javascript:;">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:;">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:;">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:;">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:;">Element<i class="fas fa-chevron-down"></i></a>
                        <ul class="mega-menu">
                            <li><a href="javascript:;">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:;">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:;">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:;">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:;">Contact Us<i class="fas fa-chevron-down"></i></a>
                        <ul class="sub-menu">
                            <li><a href="contact-1">Contact us 1</a></li>
                            <li><a href="contact-2">Contact us 2</a></li>
                            <li><a href="contact-3">Contact us 3</a></li>
                            <li><a href="contact-4">Contact us 4</a></li>
                        </ul>
                    </li>
                </ul>		
            </div>
        </div>
    </div>
</div>
<!-- main header END -->
</header>
<!-- header END -->