{% assign lang = page.lang %} {% assign siteData = site.data.header[lang].data %} {% assign dataToShow = site.data.header[lang].data %} {% assign file = page.fileName %} {% assign folder = page.folderName %} {% assign Data = site.data[folder][lang][file] %} {% assign logovalue = "40px" %} {%- if page.layout == 'home-1' or page.layout == "feature-1" -%} <header data-layout="{{page.layout}}" id="header" class="home1-nav-header"> <nav class="header-navbar navbar navbar-expand-lg"> <div class="container px-0"> {% if dataToShow.navbarBrandText != "" %} <a id="home-link" class="navbar-brand" href="/" title="{{dataToShow.navbarBrandText}}">{{dataToShow.navbarBrandText}}</a> {% else %} <a id="home-link" href="/"> <img class="header-logo-height" width="{{dataToShow.navbarBrandLogoWidth }}" height="{{dataToShow.navbarBrandLogoHeight | default: logovalue }}" src="{{ dataToShow.navbarBrandLogo }}" alt="{{ dataToShow.navbarBrandLogo }}" {%- if site.crossorigin -%} crossorigin {%- endif -%}> </a> {% endif %} <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="hamburger"> <div class="header_bars"></div> <div class="header_bars"></div> <div class="header_bars"></div> </button> <div class="d-flex align-items-center"> {%- if site.navigationSearch -%} <div class="nav-search mr-4"> <div class="search-container"> <input type="text" class="search-input" placeholder="Search Tools"> <button class="search-button"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g> </svg> </button> </div> <div id="results" class="searchbarResults"></div> </div> {%- endif -%} <div class="appscms-navbar-nav-links"> {%- for item in dataToShow.navItems -%} <a class="appscms-nav-link" href="{{item.url}}">{{item.name}}</a> {%- endfor -%} </div> </div> </div> </nav> </header> {%- else -%} <header id="header"> <nav class="navbar navbar-expand-lg py-3 px-sm-2"> {% if dataToShow.navbarBrandText != "" %} <a id="home-link" class="navbar-brand" href="/" title="{{dataToShow.navbarBrandText}}">{{dataToShow.navbarBrandText}}</a> {% else %} <a id="home-link" href="/"> <img class="logo-height" width="{{dataToShow.navbarBrandLogoWidth | default: logovalue}}" height="{{dataToShow.navbarBrandLogoHeight | default: logovalue}}" src="{{ dataToShow.navbarBrandLogo }}" alt="{{ dataToShow.navbarBrandLogo }}" {%- if site.crossorigin -%} crossorigin {%- endif -%}> </a> {% endif %} <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <div class="hamburger-menu"> <span class="line-top"></span> <span class="line-center"></span> <span class="line-bottom"></span> </div> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> {%- if Data.megaMenu -%} <div class="nav-item nav__item"> <a class="dropdown-toggle ml-lg-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> {{Data.megaMenu.nav-link-name}} </a> <div class="dropmenu dropdown-menu" aria-labelledby="navbarDropdown"> <div class="inner-dropdown"> {%- for item in Data.megaMenu.dropdown -%} <div class="catPad mb-4"> <div class="text-muted">{{item.categoryName}}</div> {%- for item in item.links -%} <div> <a href="{{item.url}}"> {%- if item.iconSrc -%} <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;" src="{{item.iconSrc}}" {%- if site.crossorigin -%} crossorigin {%- endif -%}> {%- endif -%} {{item.name}} </a> </div> {%- endfor -%} </div> {%- endfor -%} </div> </d> </div> </div> {%- else -%} {%- if dataToShow.megaMenu -%} <div class="nav-item nav__item"> <a class="dropdown-toggle ml-lg-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> {{dataToShow.megaMenu.nav-link-name}} </a> <div class="dropmenu dropdown-menu" aria-labelledby="navbarDropdown"> <div class="inner-dropdown"> {%- for item in dataToShow.megaMenu.dropdown -%} <div class="catPad mb-4"> <div class="text-muted">{{item.categoryName}}</div> {%- for item in item.links -%} <div> <a href="{{item.url}}"> {%- if item.iconSrc -%} <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;" src="{{item.iconSrc}}" {%- if site.crossorigin -%} crossorigin {%- endif -%}> {%- endif -%} {{item.name}}</a> </div> {%- endfor -%} </div> {%- endfor -%} </div> </div> </div> {%- endif -%} {%- endif -%} <div class="navbar-nav"> {% for item in dataToShow.navItems %} <div class="nav-item nav__item mr-auto"> <a href="{{item.url}}">{{item.name}}</a> </div> {% endfor %} </d> </div> </div> </nav> </header> {% endif %}