Starter

Header white background

Header layouts
<header id="header" class="main-header header-float header-sticky header-sticky-smart header-style-07 bg-white text-uppercase">
    <div class="header-wrapper sticky-area">
        <div class="container">
            <nav class="navbar navbar-expand-xl">
                <div class="header-mobile d-flex d-xl-none flex-fill justify-content-between align-items-center">
                    <div class="navbar-toggler toggle-icon" data-toggle="collapse"
                         data-target="#navbar-main-menu">
                        <span></span>
                    </div>
                    <a class="navbar-brand navbar-brand-mobile" href="index.html">
                        <img src="images/light-green-logo.png" alt="The dir">
                    </a>
                    <a class="mobile-button-search" href="#search-popup"
                       data-gtf-mfp="true"
                       data-mfp-options='{"type":"inline","mainClass":"mfp-move-from-top mfp-align-top search-popup-bg","closeOnBgClick":false,"showCloseBtn":false}'><i
                            class="far fa-search"></i></a>
                </div>
                <div class="collapse navbar-collapse d-xl-flex align-items-center" id="navbar-main-menu">
                    <a class="navbar-brand d-none d-lg-block" href="index.html">
                        <img src="images/light-green-logo.png" alt="The dir">
                    </a>

                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Home <span class="caret"><i
                                    class="fas fa-angle-down"></i></span></a>
                            <ul class="sub-menu x-animated x-fadeInUp">
                                <li class="nav-item"><a class="nav-link" href="index.html">main</a>
                                </li>
                                <li class="nav-item"><a class="nav-link" href="demo/automotive-service/home-automotive-services.html">
                                    automotive service</a></li>
                                <li class="nav-item"><a class="nav-link" href="demo/food-and-restaurant/home-food-and-restaurant.html">
                                    food and restaurant</a></li>
                                <li class="nav-item"><a class="nav-link" href="demo/health-and-medical/home-health-and-medical.html">
                                    health and medical</a></li>
                                <li class="nav-item"><a class="nav-link" href="demo/hotel/home-hotels.html">hotel</a>
                                </li>
                                <li class="nav-item"><a class="nav-link" href="demo/job/home-jobs.html">jobs</a>
                                </li>
                                <li class="nav-item"><a class="nav-link" href="demo/service-finder/home-services-finder.html">
                                    service finder</a></li>
                                <li class="nav-item"><a class="nav-link" href="demo/shopping/home-shopping.html">
                                    shopping</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Element<span class="caret"><i
                                    class="fas fa-angle-down"></i></span></a>
                            <div class="sub-menu x-menu-mega x-animated x-fadeInUp width-800">
                                <div class="container">
                                    <div class="row w-100">
                                        <div class="col-lg-4">
                                            <h5>Group 01</h5>
                                            <ul class="mega-menu-col">
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/button.html">Buttons</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/category.html">Categories</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/client-logo.html">Client
                                                    logo</a></li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/counter.html">Counter</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/cta.html">CTA</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-4">
                                            <h5>Group 02</h5>
                                            <ul class="mega-menu-col">
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/heading.html">Heading</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/icon-box.html">Icon
                                                    box</a></li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/image-box.html">Image
                                                    box</a></li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/listing.html">Listing</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/post.html">Post</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-4">
                                            <h5>Group 03</h5>
                                            <ul class="mega-menu-col">
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/social-icons.html">Socical
                                                    icon</a></li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/store.html">Store</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/tab.html">Tab</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/table-listing.html">Table
                                                    listing</a></li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/testimonial.html">Testimonial</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link"
                                                                        href="elements/widget.html">Widget</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pages
                                <span class="caret"><i
                                        class="fas fa-angle-down"></i></span>
                            </a>
                            <ul class="sub-menu x-animated x-fadeInUp">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Shop <span class="caret"><i
                                            class="fas fa-angle-down"></i></span></a>
                                    <ul class="sub-menu x-animated x-fadeInUp">
                                        <li class="nav-item"><a class="nav-link" href="shop-listing.html">Shop
                                            listing</a></li>
                                        <li class="nav-item"><a class="nav-link" href="shop-checkout.html">Shop
                                            checkout</a></li>
                                        <li class="nav-item"><a class="nav-link" href="shop-my-account.html">Shop
                                            my account</a></li>
                                        <li class="nav-item"><a class="nav-link" href="shop-shopping-cart.html">Shop
                                            shopping cart</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="shop-single-product.html">Shop single
                                            product</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Panel <span class="caret"><i
                                            class="fas fa-angle-down"></i></span></a>
                                    <ul class="sub-menu x-animated x-fadeInUp">
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-dashboard.html">
                                            dashboard</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-ad-campaigns-active.html">
                                            ad campaigns active</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-ad-campaigns-start-new.html">
                                            ad campaign start new</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-invoice-details.html">
                                            invoice details</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-invoice-listing.html">
                                            invoice listing</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-my-favourite.html"> my
                                            favourite</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-my-listing.html"> my
                                            listing</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-my-profile.html"> my
                                            profile</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-package.html">
                                            package</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-review-received.html">
                                            review received</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="panel-review-submitted.html">
                                            review submitted</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Other pages <span class="caret"><i
                                            class="fas fa-angle-down"></i></span></a>
                                    <div class="sub-menu x-menu-mega x-animated x-fadeInUp">
                                        <div class="container">
                                            <div class="row w-100">
                                                <div class="col-lg-6">
                                                    <ul class="mega-menu-col">
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-404.html">
                                                            404</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-about.html">
                                                            about</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-coming-soon.html">
                                                            comming soon</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-contact.html">
                                                            contact</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-faqs.html">
                                                            faqs</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-how-it-work.html">
                                                            how it work</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-pricing-plan.html">
                                                            pricing plan</a></li>
                                                    </ul>
                                                </div>
                                                <div class="col-lg-6">
                                                    <ul class="mega-menu-col">
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-privacy-policy.html">
                                                            privacy
                                                            policy</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-submit-listing.html">submit
                                                            listing</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-terms-and-condition.html">Term
                                                            and condition</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-typography.html">
                                                            typography</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-common-elements.html">
                                                            Common elements</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="page-under-construction.html">
                                                            under
                                                            construction</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Explore<span class="caret"><i
                                            class="fas fa-angle-down"></i></span></a>
                                    <div class="sub-menu x-menu-mega x-animated x-fadeInUp">
                                        <div class="container">
                                            <div class="row w-100">
                                                <div class="col-lg-6">
                                                    <h5>Layout</h5>
                                                    <ul class="mega-menu-col">
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="explore-full-map-grid.html">
                                                            full
                                                            map grid</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="explore-full-map-list.html">
                                                            full
                                                            map list</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="explore-half-map-grid.html">
                                                            half
                                                            map grid</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="explore-half-map-list.html">
                                                            half
                                                            map list</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="explore-sidebar-grid.html">
                                                            sidebar
                                                            grid</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="explore-sidebar-list.html">
                                                            sidebar
                                                            list</a></li>
                                                    </ul>
                                                </div>
                                                <div class="col-lg-6">
                                                    <h5>Listing details</h5>
                                                    <ul class="mega-menu-col">
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="listing-details-full-gallery.html">
                                                            full gallery</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="listing-details-full-image.html">
                                                            full image</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="listing-details-full-map.html">
                                                            full map</a></li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="listing-details-gallery.html">gallery</a>
                                                        </li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="listing-details-image.html">
                                                            image</a>
                                                        </li>
                                                        <li class="nav-item"><a class="nav-link"
                                                                                href="listing-details-no-image.html">
                                                            no
                                                            image</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Blog <span class="caret"><i
                                    class="fas fa-angle-down"></i></span></a>
                            <ul class="sub-menu x-animated x-fadeInUp">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Blog layout<span class="caret"><i
                                            class="fas fa-angle-down"></i></span></a>
                                    <ul class="sub-menu x-animated x-fadeInUp">
                                        <li class="nav-item"><a class="nav-link" href="blog-listing-grid.html">
                                            grid</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="blog-listing-large-image.html">
                                            large image</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="blog-listing-with-sidebar.html">
                                            with sidebar</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Post
                                        <span class="caret"><i class="fas fa-angle-down"></i></span>
                                    </a>
                                    <ul class="sub-menu x-animated x-fadeInUp">
                                        <li class="nav-item"><a class="nav-link" href="blog-single-audio.html">
                                            audio</a></li>
                                        <li class="nav-item"><a class="nav-link"
                                                                href="blog-single-gallery.html">
                                            gallery</a></li>
                                        <li class="nav-item"><a class="nav-link" href="blog-single-image.html">
                                            image</a></li>
                                        <li class="nav-item"><a class="nav-link" href="blog-single-video.html">video</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Docs <span class="caret"><i
                                    class="fas fa-angle-down"></i></span></a>
                            <ul class="sub-menu x-animated x-fadeInUp">
                                <li class="nav-item">
                                    <a class="nav-link" href="document/introduction.html">Documentation</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="starter/introduction.html">Get started
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <div class="header-customize justify-content-end align-items-center d-none d-xl-flex ml-auto">
                        <div class="header-customize-item signal">
                            <svg class="icon icon-wifi-signal-symbol">
                                <use xlink:href="#icon-wifi-signal-symbol"></use>
                            </svg>
                        </div>
                        <div class="header-customize-item">
                            <a href="#login-popup" class="link text-uppercase" data-gtf-mfp="true"
                               data-mfp-options='{"type":"inline"}'>
                                <svg class="icon icon-user-circle-o">
                                    <use xlink:href="#icon-user-circle-o"></use>
                                </svg>
                                Log in</a>
                        </div>
                        <div class="header-customize-item language">
                            <div class="dropdown show">
                                <a class="dropdown-toggle d-flex align-items-center font-weight-semibold link"
                                   href="#"
                                   role="button"
                                   id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
                                   aria-expanded="false">
                                    EN
                                </a>

                                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                    <a class="dropdown-item" href="#">FR</a>
                                    <a class="dropdown-item" href="#">CH</a>
                                    <a class="dropdown-item" href="#">KO</a>
                                </div>
                            </div>
                        </div>
                        <div class="header-customize-item button">
                            <a href="#" class="btn btn-outline-dark btn-icon-right text-uppercase">Post a
                                job <i
                                        class="far fa-angle-right"></i></a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</header>
<link rel="stylesheet" href="vendors/animate.css">
<script src="vendors/hc-sticky/hc-sticky.js"></script>
Create Your Account

Search

Or browse the highlights
Close
HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download