Check Header Style 02
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 header-transparent style-2"> <!-- Main Header --> <div class="sticky-header main-bar-wraper navbar-expand-lg"> <div class="main-bar clearfix "> <div class="container-fluid clearfix"> <!-- Website Logo --> <div class="logo-header mostion logo-dark"> <a href="index.html"><img src="images/logo.png" alt=""></a> </div> <div class="logo-header mostion logo-white"> <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"> <ul> <li> <a class="search-link" id="quik-search-btn" href="javascript:void(0);"> <i class="fas fa-search"></i> </a> </li> <li> <a href="javascript:void(0);" class="menu-btn"> <span></span> <span></span> <span></span> </a> </li> </ul> </div> </div> <!-- Extra Nav --> <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 class="full-sidenav"> <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="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 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 class="col-lg-6"> <h4>About Us</h4> <p>Aliquam erat volutpat. Nunc erat massa, porttitor vel egestas sit amet, tristique at massa. Donec posuere odio neque, in ultricies lorem aliquet eu. Donec venenatis libero a nulla placerat egestas.</p> <a href="about-us.html" class="btn btn-primary">READ MORE</a> </div> </div> </div> </div> <div class="header-nav navbar-collapse collapse justify-content-end" 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>