<div class="menu_kipya menu-section ">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-3 col-7">
                <a href="<?= esc_url(home_url('/')); ?>" class="logo"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/african-coffee-bureau-blended.png" alt="Africa Coffee Bueraue"></a>
                <a href="<?= esc_url(home_url('/')); ?>" class="sticky-logo"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/african-coffee-bureau-logo.png" alt="Africa Coffee Bueraue"></a>
            </div><!-- logo !-->
            <div class="col-lg-7 col-3 align-self-center">
                <nav class="navbar main-menu navbar-expand-lg">
                    <div class="container-fluid">
                    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">MENU</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <li id="menu-item-113" class="menu-item nav-item nav-item-113 d-block d-md-none" style="font-size: 20px;list-style-type: none;">
                                <a href="<?= esc_url(home_url('/')); ?>" class="nav-link" >Home</a>
                        </li>
                            <?php
                                $menu = wp_nav_menu(array(
                                    'theme_location' => 'primary',
                                    'container' => false,
                                    'menu_class' => '',
                                    'fallback_cb' => '__return_false',
                                    'items_wrap' => '<ul id="%1$s" class="navbar-nav mx-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                                    'depth' => 2,
                                    'walker' => new bootstrap_5_wp_nav_menu_walker()
                                ));
                            ?>
                        </div>
                    </div>
                    </div>
                    </div>
                </nav>
            </div><!-- menu !-->
            <div class="col-lg-2 col-2 align-self-center">
                <div class="d-flex bd-highlight">
                    <div class="bd-highlight flex-grow-1 search align-self-center"> 
                        <button type="button" class="btn p-0" data-bs-toggle="modal" data-bs-target="#searchModal">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                    <div class="bd-highlight me-1 d-none d-md-block socials">
                        <ul>
                            <li>
                                <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                                    <circle cx="12" cy="12" r="11" stroke="currentColor" stroke-width="0" fill="none"/>
                                    <path d="M16 2h-3a5 5 0 0 0-5 5v3H5v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                                </svg>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                <i class="bi bi-twitter-x"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                <i class="bi bi-instagram"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                <i class="bi bi-tiktok"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div><!-- button !-->
        </div>
    </div>
</div><!-- Menu section !-->

<!-- Modal -->
<div class="modal fade modal-search" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg bg-transparent">
    <div class="modal-content bg-transparent border-0">
      <div class="modal-body bg-transparent">
        <form method="post" action="">
            <div class="input-group">
                <input id="ajax-search" class="form-control bg-tranparent rounded-0" type="search" placeholder="Search Website here..." aria-label="Search">
                <button id="search-button" class="btn btn-search rounded-0" type="submit">Search</button>
            </div>
        </form>
        <div id="search-results"></div>
      </div>
    </div>
  </div>
</div>