<style>
.sticky {
position: fixed;
top: 0;
width: 100%
}
</style>
<div id="myNav" class="overlay" style="display:none;">
<div class="overlay-content">
{% if section.settings.header_style == '1' %}
<form class="search" action="/search">
<input type="text" placeholder="{{section.settings.search_text}}" name="q" value="{{ search.terms | escape }}"/>
<input type="submit" style="border:solid 1px #fff;" value="Search" />
</form>
{% endif %}
<p style="color:#aaa;font-size:22px;text-align:center;margin:8px 0 10;">💬 {{ shop.email }}</p>
{% for link in linklists[section.settings.mobile_linklist].links %}
<a href="{{ link.url }}" style="margin:10px 0;">{{ link.title }}</a>
{% endfor %}
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()" style="color:#fff">X CLOSE</a>
</div>
</div>
<div class="head" id="sticky-menu" style="z-index:100;border-bottom:solid 1px #ddd;margin:0 auto;">
{% if section.settings.announcement %}
<div style="background:{{section.settings.announce_background}};color:{{section.settings.announce_color}};">
<div class="cont" style="max-width:{{section.settings.section_width}}px;">
<a href="{{section.settings.announce_link}}" class="flex-rw"
style="width:100%;justify-content:center;align-items:center;flex-wrap:nowrap;padding:3px 0;color:{{section.settings.announce_color}};">
{% if section.settings.pre_image != blank %}
<img src="{{section.settings.pre_image | img_url: '40x40' }}" style="width:100%;max-width:40px;margin-right:20px;">
{% endif %}
{% if section.settings.announce_text != blank %}
<p style="font-size:{{section.settings.announce_font_size}}px;margin:0 10px 0 0;line-height:1.2em;color:inherit;">
{{section.settings.announce_text}}
</p>
{% endif %}
{% if section.settings.post_image != blank %}
<img class="dsk-only" src="{{section.settings.post_image | img_url: '40x40' }}" style="width:100%;max-width:40px;margin-right:20px;">
{% endif %}
{% if section.settings.announce_btn != blank %}
<p class="dsk-only" style="margin-bottom:0;color:inherit;padding:0 8px;border:solid 1px {{section.settings.announce_color}};font-size:20px;border-radius:4px;">
{{section.settings.announce_btn}}
</p>
{% endif %}
</a>
</div>
</div>
{% endif %}
<div style="background:{{section.settings.header_background}};color:{{section.settings.header_color}};">
<div class="cont" style="max-width:{{section.settings.section_width}}px;">
<div class="flex-rw" style="width:100%;justify-content:space-between;align-items:center;flex-wrap:nowrap;padding:2px 0;">
<a class="two col logo" href="{{shop.url}}" title="{{shop.name}}" style="margin:0;line-height:1em;">
{% if section.settings.logo != nil %}
<img src="{{ section.settings.logo | img_url: '320x320' }}" alt="{{shop.name}}" style="width:100%"/>
{% else %}
{{ shop.name }}
{% endif %}
</a>
{% if section.settings.header_style == '1' %}
<div class="dsk-only searchbar">
<form action="/search" style="height:40px; margin:0;position:relative;">
<input type="text" name="q" placeholder="{{section.settings.search_text}}"
value="{% if search and search.results.first.price %}{{ search.terms }}{% endif %}"
autocapitalize="off" autocomplete="off" autocorrect="off">
<span class="search-submit button" style="border-radius:0 4px 4px 0;">Search</span>
</form>
</div>
{% elsif section.settings.header_style == '2' %}
<ul class="menu dsk-only flex-rw" style="padding:0px;list-style:none;font-size:18px;margin:0;">
{% for link in linklists[section.settings.main_linklist].links %}
{% if linklists[link.handle] == empty %}
<li style="align-self:center;list-style:none;">
<a href="{{ link.url }}" class="top-link" style="padding:0 20px">{{ link.title }}</a>
</li>
{% else %}
{% assign count = 0 %}
{% for link in linklists[link.handle].links %}{% capture count %}{{ count }}*{% endcapture %}
{% if linklists[link.handle] != empty %}
{% for link in linklists[link.handle].links %}{% capture count %}{{ count }}*{% endcapture %}{% endfor %}
{% endif %}
{% endfor %}
{% assign column_threshold = section.settings.dropdown_column_links | minus: 0 %}
<li style="align-self:center;list-style:none;">
<a href="{{ link.url }}" style="padding:0 20px;"
class="sub-menu {% if link.active %}active{% endif %}
{% for link in linklists[link.handle].links %}
{% for l in linklists[link.handle].links %}
{% if l.active %}active{% endif %}{% endfor %}
{% if link.active %}active{% endif %}{% endfor %}">
{{ link.title }}<span class="arrow">▾</span>
</a>
<div class="dropdown">
<ul style="padding-left:0;list-style:none;">
{% assign count = 0 %}{% assign split = false %}
{% for link in linklists[link.handle].links %}
{% capture count %}{{ count }}*{% endcapture %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% if linklists[link.handle] != empty %}
{% for link in linklists[link.handle].links %}
{% capture count %}{{ count }}*{% endcapture %}
<li><a class="sub-link" href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}
{% endfor %}
</ul>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
<!-- Right Menu -->
<div class="flex-rw two col menu-right" style="justify-content:flex-end;flex-wrap:nowrap;margin:0;align-items:initial;">
{% if section.settings.use_currency_converter %}
<div class="currencies dsk-only" style="margin:0 4%;align-self:center;">
{% include 'currencies-switcher' %}
</div>
{% endif %}
{% if section.settings.order_link != blank %}
<a href="{{section.settings.order_link}}" style="align-self:center; margin:0 4%;padding:2px 10px;border-radius:5px;border:solid 1px;">
Order Now
</a>
{% endif %}
<div class="flex-cl mbl-only" onclick="openNav()" style="text-align:center;">
<img src="https://cdn.shopify.com/s/files/1/0065/9315/1029/files/icons8-menu-100.png?9797"
style="max-width:30px;position:relative;margin:auto;">
<p style="margin:0;font-size:12px;text-align:center;line-height:12px;color:#000">MENU</p>
</div>
{% if shop.customer_accounts_enabled %}
<a href="/account" style="text-align:center;margin:0 4%;max-width:50px">
<img src="https://cdn.shopify.com/s/files/1/0255/5953/1568/files/icons8-customer-100.png?587"
style="max-width:30px;margin:auto;">
<p style="margin:0;font-size:12px;text-align:center;line-height:12px;color:#000">
{%- if customer -%}{{ customer.name }}{%- else -%}LOG IN{%- endif -%}
</p>
</a>
{% if customer %}
<a href="/account/logout" style="text-align:center;margin:0 4%;max-width:50px">
<img src="{{'sign_out.png' | asset_url}}"
style="max-width:30px;margin:auto;">
<p style="margin:0;font-size:12px;text-align:center;line-height:12px;color:#000">LOG OUT</p>
</a>
{% endif %}
{% endif %}
<a href="/cart" style="position:relative;text-align:center;margin:0 4%;">
{% if section.settings.cart != blank %}
<img src="{{section.settings.cart | img_url: '40x40'}}"
style="max-width:30px;position:relative;">
{% else %}
<img src="https://cdn.shopify.com/s/files/1/0065/9315/1029/files/icons8-shopping-bag-100_1.png?9500"
style="max-width:30px;position:relative;">
{% endif %}
<div style="font-size:14px;width:16px;height:16px;line-height:16px;text-align:center;background:#000;border-radius:50%;
position:absolute;margin:auto;color:#fff;{{section.settings.cart_position}}">{{ cart.item_count }}</div>
<p style="margin:0;font-size:12px;text-align:center;line-height:12px;color:#000">CART</p>
</a>
</div>
</div>
</div>
</div>
{% if section.settings.header_style == '1' %}
<div class="dsk-only" style="background:{{section.settings.menu_background}};">
<div class="cont" style="max-width:{{section.settings.section_width}}px;padding:10px 0;">
<div class="flex-rw" style="justify-content:center;">
<ul class="menu flex-rw" style="padding:0px;list-style:none;font-size:18px;margin:0;" id="nav">
{% for link in linklists[section.settings.main_linklist].links %}
{% if linklists[link.handle] == empty %}
<li style="align-self:center;list-style:none;">
<a href="{{ link.url }}" class="top-link" style="padding:0 20px;color:{{section.settings.menu_color}};">
{{ link.title }}
</a>
</li>
{% else %}
{% assign count = 0 %}
{% for link in linklists[link.handle].links %}{% capture count %}{{ count }}*{% endcapture %}
{% if linklists[link.handle] != empty %}
{% for link in linklists[link.handle].links %}{% capture count %}{{ count }}*{% endcapture %}{% endfor %}
{% endif %}
{% endfor %}
{% assign column_threshold = section.settings.dropdown_column_links | minus: 0 %}
<li style="align-self:center;list-style:none;">
<a href="{{ link.url }}" style="padding-right:20px;color:{{section.settings.menu_color}};"
class="sub-menu {% if link.active %}active{% endif %}
{% for link in linklists[link.handle].links %}
{% for l in linklists[link.handle].links %}
{% if l.active %}active{% endif %}{% endfor %}
{% if link.active %}active{% endif %}{% endfor %}">
{{ link.title }}<span class="arrow">▾</span>
</a>
<div class="dropdown {% if count.size > column_threshold %}dropdown-wide{% endif %}">
<ul style="padding:0 0 3px;list-style:none;">
{% assign count = 0 %}{% assign split = false %}
{% for link in linklists[link.handle].links %}
{% capture count %}{{ count }}*{% endcapture %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% if linklists[link.handle] != empty %}{% for link in linklists[link.handle].links %}
{% capture count %}{{ count }}*{% endcapture %}
<li><a class="sub-link" href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}
{% if count.size > column_threshold and split == false %}
{% assign split = true %}
{% endif %}
{% endfor %}
</ul>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
<!--
<div class="mbl-only">
<form action="/search" class="searchbox-mobile">
<input type="text" style="width:100%;" name="q" placeholder="Search..." value="{% if search and search.results.first.price %}{{ search.terms }}{% endif %}" autocapitalize="off" autocomplete="off" autocorrect="off" />
</form>
</div>
-->
<!--
Searchbar End -->
<script>
function openNav() {
var menu = document.getElementById("myNav");
if (menu.style.display === "none") {
menu.style.width = "100%";
document.getElementById("myNav").style.display = "block";
} else {
menu.style.width = "0%";
document.getElementById("myNav").style.display = "none";
}
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").style.display = "none";
}
window.onscroll = function() {myFunction()};
var header = document.getElementById("sticky-menu");
var sticky = header.offsetTop;
/*
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
*/
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (window.pageYOffset > sticky) {
if (prevScrollpos > currentScrollPos) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
prevScrollpos = currentScrollPos;
} else {
header.classList.remove("sticky");
}
}
</script>
{% schema %}
{
"name": "Header",
"class": "header-section",
"settings": [
{
"type": "header",
"content": "Header Container Settings"
},
{
"type": "range",
"id": "section_width",
"min": 600,
"max": 1600,
"step": 50,
"unit": "px",
"label": "Max Width of Section (Recommended 1200px)",
"default": 1200
},
{
"type": "header",
"content": "Announcement Settings"
},
{
"type": "checkbox",
"id": "announcement",
"label": "Check this to use an Announcement Bar",
"default": false
},
{
"type": "color",
"id": "announce_background",
"label": "Announcement Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "announce_color",
"label": "Announcement Font Color",
"default": "#cccccc"
},
{
"type": "header",
"content": "Announcement Content"
},
{
"type": "image_picker",
"id": "pre_image",
"label": "Announcement Image (Optional)",
"info": "(200px x 40px Recommended Maximum Dimensions)"
},
{
"type": "html",
"id": "announce_text",
"label": "Announcement Text",
"default": "<b>GIVEAWAY CONTEST</b> - Winners Announced Every Week"
},
{
"type": "range",
"id": "announce_font_size",
"min": 12,
"max": 20,
"step": 2,
"unit": "px",
"label": "Font Size of Announcement",
"default": 18
},
{
"type": "image_picker",
"id": "post_image",
"label": "Announcement Image 2 (Optional)",
"info": "(200px x 40px Recommended Maximum Dimensions)"
},
{
"type": "html",
"id": "announce_btn",
"label": "Announcement Button Text",
"info": "Leave this blank to not display a button.",
"default": "<b>FREE ENTRY NOW</b>"
},
{
"type": "url",
"id": "announce_link",
"label": "Announcement Link"
},
{
"type": "header",
"content": "Header Settings"
},
{
"type": "color",
"id": "header_background",
"label": "Header Background Color",
"default": "#000000"
},
{
"type": "radio",
"id": "header_style",
"label": "Header Style",
"options": [
{ "value": "1", "label": "Style 1" },
{ "value": "2", "label": "Style 2" }
],
"default": "1"
},
{
"type": "header",
"content": "Header Content"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "link_list",
"id": "main_linklist",
"label": "Main menu",
"default": "main-menu"
},
{
"type": "link_list",
"id": "mobile_linklist",
"label": "Mobile menu"
},
{
"type": "checkbox",
"id": "use_currency_converter",
"label": "Check this to use Currency Converter",
"default": false
},
{
"type": "url",
"id": "order_link",
"label": "Order Now Button Link"
},
{
"type": "image_picker",
"id": "cart",
"label": "Cart Icon",
"info": "Leave Blank to use our default. Default may not suit your brand."
},
{
"type": "text",
"id": "cart_position",
"label": "Cart Button Counter Position",
"default": "top:22%;left:0;right:0;",
"info": "Adjust the 2 numbers in this setting ONLY to fine-tune the position of your Cart Counter. The default value works with our default cart icon."
},
{
"type": "range",
"id": "dropdown_column_links",
"min": 4,
"max": 20,
"step": 4,
"label": "Main menu dropdown links in first column",
"default": 8
},
{
"type": "header",
"content": "Style Specific Settings"
},
{
"type": "html",
"id": "search_text",
"label": "Style 1 - Searchbar Text",
"default": "Product 1, Product 2, Product 3..."
},
{
"type": "color",
"id": "menu_background",
"label": "Style 2 - Menu Bar Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "menu_color",
"label": "Style 2 - Menu Bar Font Color",
"default": "#cccccc"
}
]
}
{% endschema %}
