<nav class="navbar navbar-expand-lg fixed-top" id="navbar_top">
    <div class="container">
      <div class="row g-3 d-flex align-items-center justify-content-between">
        <div class="col-md-2 col-lg-2 col-6">
          <a class="navbar-brand" href="{{site_url()}}">
            {{-- <!-- <img src="{{('target/img/logo.png')}}" alt="Logo" width="90%" height="auto" class="d-inline-block align-text-top logo"> --> --}}
            <img src="{{site_url(SITEVARS->primary_logo)}}" alt="Logo" width="90%" height="auto" class="d-inline-block align-text-top logo">
          </a>
  
        </div>
        <div class="col-md-10 col-lg-10 col-6">
          <button class="navbar-toggler float-end bg-transparent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon float-end"><i class="fa-solid fa-bars custom-text"></i></span>
          </button>
          <div class="collapse navbar-collapse d-flex justify-content-md-end d-none d-lg-block" id="navbarTogglerDemo01">
            {{MPCMS::showMenu('header-menu')}}
            <ul class="navbar-nav d-flex align-items-center mt-0">
            <li class="nav-item">
              <div class="hstack gap-3">
              <a href="tel: {{SITEVARS->phone}}"><i class="fa-solid fa-phone"></i></a>  
              <a href="{{SITEVARS->fb}}"><i class="fa-brands fa-facebook fs-5"></i></a>
              <a href="{{SITEVARS->insta}}"><i class="fa-brands fa-instagram fs-5"></i></a>
              </div>
            </li>
            </ul>
          </div>
        </div>
        <div class="offcanvas offcanvas-end text-bg-dark d-xs-block d-sm-block d-md-block d-lg-none d-xl-none" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
          <div class="offcanvas-header">
            <a class="navbar-brand" href="">
              <img src="{{site_url(SITEVARS->primary_logo)}}" alt="Logo" width="90%" height="auto" class="d-inline-block align-text-top logo p-5 pb-0">
            </a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            {{MPCMS::showMenu('header-menu')}}
          </div>
        </div>
  </nav>