<div class="menu-section">
<div class="top-bar-wrap sticky-menu">

</div>

    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-lg-3 col-7 align-self-center">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="530px"
                    height="200px" viewBox="0 0 395 150" version="1.1" class=" LogoBackground">
                    <title>BHF</title>
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="Group" fill="#fff" fill-rule="nonzero">
                            <path
                                d="M0,0 L0,149.856 L176.814,149.856 C220.349,149.856 228.173,144.384 244.07,126.042 C258.581,109.298 303.691,51.168 314.023,38.972 C336.723,12.182 344.907,0.272 395.323,-0.004 L0,0 Z"
                                id="Path_17985" opacity="0.302" />
                            <path
                                d="M0,0 L0,149.856 L162.814,149.856 C206.349,149.856 214.173,144.384 230.07,126.042 C244.581,109.298 289.691,51.168 300.023,38.972 C322.723,12.182 330.907,0.272 381.323,-0.004 L0,0 Z"
                                id="Path_17984" />
                        </g>
                    </g>
                </svg>

                <a href="<?= esc_url(home_url('/')); ?>" class="logo"><img
                        src="<?php echo get_template_directory_uri(); ?>/assets/images/bhflogo-web__blend.png"
                        alt="Busoga Health Forum"></a>
                <a href="<?= esc_url(home_url('/')); ?>" class="sticky-logo"><img
                        src="<?php echo get_template_directory_uri(); ?>/assets/images/bhflogo-web__blend.png"
                        alt="Busoga Health Forum"></a>
            </div><!-- logo !-->
            <div class="col-lg-7 col-3 align-self-center">

                <nav class="navbar main-menu navbar-expand-lg float-end">
                    <div class="container-fluid">
                        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                            <i class="bi bi-list fs-1 text-white"></i>
                        </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="https://www.facebook.com/busogahealthforum2020" target=" _blank">
                                  <i class="bi bi-facebook" style="background: none; display: inline-block;"></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://x.com/BusogaHealth" target="_blank">
                                    <i class="bi bi-twitter-x"></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.instagram.com/busoga_health_forum/" target=" _blank">
                                    <i class="bi bi-instagram"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank">
                                    <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>