<div class="menu-section">
    <div class="container">
        <div class="row">
            <div class="col top-right-widget"><?php dynamic_sidebar('top-right'); ?></div>
        </div>
    </div>

     <div class="container main-header-menu">
        <div class="row justify-content-between">
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-7 col-7 align-self-center p-0">
                <!-- Logo -->
                <?php
                $custom_logo_id = get_theme_mod('custom_logo');
                $logo_url = wp_get_attachment_image_src($custom_logo_id, 'full');
                if ($logo_url) {
                    echo '<a href="' . esc_url(home_url('/')) . '" class="ps-3"><img src="' . esc_url($logo_url[0]) . '" class="img-fluid logo" alt="' . get_bloginfo('name') . '"></a>';
                } else {
                    echo '<a href="' . esc_url(home_url('/')) . '"><h1>' . get_bloginfo('name') . '</h1></a>';
                }
                ?>
                <a href="<?= esc_url(home_url('/')); ?>" class="sticky-logo"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo-inyana-international.png" alt="Inyana International School"></a>
            </div><!-- logo -->
            <div class="col-xl-9 col-lg-9 col-md-9 col-sm-3 col-3 align-self-end p-0">
                <div class="row">
                    <div class="col-xl-11 col-lg-11 col-md-11 col-sm-8 d-none d-sm-block align-self-center p-0">
                        <!-- Menu -->
                        <nav class="navbar main-menu navbar-expand-lg">
                            <div class="container-fluid">
                                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                    <?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 ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                                        'depth' => 2,
                                        'walker' => new bootstrap_5_wp_nav_menu_walker()
                                    ));
                                    ?>
                                </div>
                            </div>
                        </nav>
                    </div><!-- Menu -->
                    
                    <div class="col-4 d-sm-none align-self-center text-center">
                        <button class="btn btn-transparent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                            <i class="bi bi-list" style="font-size:40px; color:#fff;"></i>
                        </button>

                        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                            <div class="offcanvas-header">
                                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                            </div>
                            <div class="offcanvas-body py-3">
                                <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
                                wp_nav_menu(array(
                                    'theme_location' => 'primary',
                                    'container' => false,
                                    'menu_class' => '',
                                    'fallback_cb' => '__return_false',
                                    'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                                    'depth' => 2,
                                    'walker' => new bootstrap_5_wp_nav_menu_walker()
                                ));
                                ?>
                            </div><!-- offcanvas Body -->
                        </div>
                    </div><!-- Mobile Menu -->
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-4 col-6 align-self-center">
                        <div class="row header-search">
                            <div class="col  search align-self-center"> 
                                <input type="checkbox" id="scheck" name="csearch">
                                <label for="scheck"><i class="bi bi-search d-none"></i></label>
                                <ul class="search-dropdown">
                                    <li>
                                        <form method="post" action="">
                                            <div class="input-group">
                                                <input id="ajax-search" class="form-control rounded-0" type="search" placeholder="Search Inyana International Website here..." aria-label="Search">
                                                <button id="search-button" class="btn btn-search rounded-0" type="submit">Search</button>
                                            </div>
                                        </form>
                                    </li>
                                    <li id="search-results"></li>
                                </ul>
                            </div><!-- search btn -->
                        </div><!-- row !-->
                    </div><!-- Search & Donate -->
                </div>
            </div><!-- Menu area -->
        </div>
    </div><!-- container & Row -->

</div><!-- Menu section !-->

