Header Search with icons

    <!--::Begin Header-->
    <header class="z-fixed header-transparent header-absolute-top header-sticky pt-lg-3">
        <nav class="navbar navbar-expand-lg navbar-light navbar-search-w-icons">
            <div class="container position-relative">
                <!--begin:logo-->
                <a class="navbar-brand" href="index.html">
                    <img src="assets/img/logo/logo.svg" alt="" class="img-fluid navbar-brand-light">
                    <img src="assets/img/logo/logo-white.svg" alt="" class="img-fluid navbar-brand-dark">
                </a>
                <!--end:logo-->

                <div class="d-flex align-items-center navbar-no-collapse-items order-lg-last">
                    <button class="navbar-toggler order-last" type="button" data-bs-toggle="collapse"
                        data-bs-target="#mainNavbarTheme" aria-controls="mainNavbarTheme" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon">
                            <i></i>
                        </span>
                    </button>
                    <div class="nav-item d-lg-none me-3 me-lg-0">
                        <a href="#searchCollapse" data-bs-target="#searchCollapse" data-bs-toggle="collapse"
                            class="nav-link search-link lh-1">
                            <i class="bx bx-search-alt-2 fs-4 lh-1"></i>
                        </a>
                        <!--Search-bar-2-collapse-->
                    </div>
                </div>
                <!--Search collapse (visible on desktop laptop)-->
                <div class="collapse collapse-search ms-lg-auto me-lg-5 d-lg-block" id="searchCollapse">
                    <form>
                        <div class="position-relative mt-3 mt-lg-0">
                            <span
                                class="position-absolute start-0 top-50 translate-middle-y ms-3 opacity-50 pe-none">
                                <i class="bx bx-search-alt-2"></i>
                            </span>
                            <input type="text" placeholder="Type & hit enter..."
                                class="form-control bg-body-subtle border shadow-sm ps-6 rounded-4"
                                data-bs-display="static" data-bs-toggle="dropdown">
                            <!--With Submit button-->
                            <!-- <button class="btn position-absolute end-0 top-0 flex-center p-0 width-4x h-100 rounded-pill btn-white">
                                <i class="bx bx-search-alt-2"></i>
                            </button> 
                            <input type="text" placeholder="Search here..." class="form-control border-0 shadow-none ps-4 pe-6 rounded-pill">
                       -->
                            <!--:Search Dropdown:-->
                            <div class="dropdown-menu dropdown-menu-input border-top-0 border rounded-top-0 p-3">
                                <h6 class="dropdown-header ps-0 mb-2">Popular searches</h6>
                                <div class="d-flex flex-wrap gap-2 pb-2 align-items-center">
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">Jeans</a></span>
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">Shoes</a></span>
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">Watches</a></span>
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">Men's</a></span>
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">Sneakers</a></span>
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">Casual</a></span>
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">Shirts</a></span>
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">T-shirts</a></span>
                                    <span><a href="#!"
                                            class="d-block bg-body-secondary px-3 py-1 rounded small">Lowers</a></span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="collapse navbar-collapse" id="mainNavbarTheme">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="bx bx-home fs-5"></i>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                                <i class="bx bx-globe fs-5"></i>
                            </a>
                            <!--Lang dropdown-->
                            <div class="dropdown-menu dropdown-menu-end">
                                <a href="#!" class="active dropdown-item">
                                    <img src="assets/img/country/us.svg" class="me-2" width="20" alt="">
                                    <small>English</small>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <img src="assets/img/country/pt.svg" class="me-2" width="20" alt="">
                                    <small>Portuguese</small>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <img src="assets/img/country/de.svg" class="me-2" width="20" alt="">
                                    <small>German</small>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <img src="assets/img/country/fr.svg" class="me-2" width="20" alt="">
                                    <small>French</small>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <img src="assets/img/country/dk.svg" class="me-2" width="20" alt="">
                                    <small>Danish</small>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <img src="assets/img/country/es.svg" class="me-2" width="20" alt="">
                                    <small>Española</small>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <img src="assets/img/country/nl.svg" class="me-2" width="20" alt="">
                                    <small>Dutch</small>
                                </a>
                                <a href="#!" class="dropdown-item">
                                    <img src="assets/img/country/jp.svg" class="me-2" width="20" alt="">
                                    <small>japanese</small>
                                </a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                                <i class="bx bx-user fs-5"></i>
                            </a>
                            <!--Account dropdown-->
                            <div class="dropdown-menu dropdown-menu-end">
                                <div class="dropdown-header">Account</div>
                                <a href="#!" class="dropdown-item">Login</a>
                                <a href="#!" class="dropdown-item">Create Account</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <!--::/end Header-->