<style>
.g-bg-black-opacity-0_1 {
    background-color: <?php echo $bgcolor; ?> !important;
}
</style>
    <!-- Logo -->
    <a class="navbar-brand g-pos-abs g-top-20 g-left-20 g-z-index-2" href="">
      <img src="<?php echo $image; ?>" alt="logo">
    </a>
    <!-- End Logo -->

    <!-- Responsive Toggle Button -->
    <button class="btn u-header-toggler u-header-toggler--top-right g-pa-0" id="header-toggler" aria-haspopup="true" aria-expanded="false" aria-controls="js-header" aria-label="Toggle Header" data-target="#js-header">
      <span class="hamburger hamburger--collapse">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
      </span>
      </span>
    </button>
    <!-- End Responsive Toggle Button -->

    <!-- Header -->
    <div id="js-header" class="u-header u-header--fullscreen--top-right" aria-labelledby="header-toggler" data-overlay-classes="g-bg-black-opacity-0_1">
      <div class="u-header__sections-container">
        <div class="u-header__section u-header__section--dark">
          <nav class="navbar">
            <div class="container">
              <!-- Navigation -->
              <div class="align-items-center flex-sm-row w-100" id="navBar">
                <ul class="js-mega-menu navbar-nav text-uppercase mx-auto g-font-size-22">
                  <?php foreach ($services as $service) { ?>
				  <?php if ($service['link']) { ?>
				  <li class="nav-item">
                    <a href="<?php echo $service['link']; ?>" class="nav-link" style="color: <?php echo $titlecss; ?>;"><?php echo $service['title']; ?></a>
                  </li>
				  <?php } else { ?>
				  <li class="nav-item">
                    <a class="nav-link" style="color: <?php echo $titlecss; ?>;"><?php echo $service['title']; ?></a>
                  </li>
				  <?php } ?>
				  <?php } ?>
				  <?php if ($blog): ?><li class="nav-item">
					<a class="nav-link" style="color:<?php echo $titlecss; ?>;" href="index.php?route=blog/all"><?php echo $blog; ?></a>
                  </li><?php endif ?>
                </ul>
              </div>
              <!-- End Navigation -->
            </div>
          </nav>
        </div>
      </div>
    </div>
    <!-- End Header -->
  <!-- JS Plugins Init. -->
  <script>

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeaderFullscreen.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');

      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'click',
        pageContainer: $('.container'),
        breakpoint: 100000 // large value is important in this case
      });
    });
  </script>	
  <script src="catalog/view/assets/js/components/hs.header-fullscreen.js"></script>
  <script src="catalog/view/assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>