Prestige Mobile Search Icon

12little-jinny
Tourist
6 0 1

Hi,

In Prestige theme, the search bar is inside the sidebar menu. 

Is there a way to pull out that search button on the mobile header next to the hamburger menu or next to the cart icon? 

Screen Shot 2020-10-26 at 10.35.27 AM.png     Screen Shot 2020-10-26 at 10.36.05 AM.png

Replies 29 (29)
john2636
New Member
2 0 0

Hello, same problem here. Trying to get a Search Icon on mobile site.

 

 

Store: https://threadquarters.co

Password: "cheang"

 

Here is my Header code:

{%- assign use_transparent_header = false -%}

{%- if template == 'index' and section.settings.enable_transparent_header -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if template.name == 'collection' and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != 'no-image' -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if section.settings.navigation_style != 'sidebar' -%}
{%- assign use_sidebar_menu = false -%}
{%- else -%}
{%- assign use_sidebar_menu = true -%}
{%- endif -%}

{%- if settings.currency_conversion_enabled -%}
{%- capture currency_conversion_select -%}
<div class="Header__CurrencySelector Text--subdued Heading Link Link--primary u-h8 hidden-pocket hidden-lap">
<div class="Select Select--transparent">
<select class="CurrencySelector__Select u-h8">
{%- capture codes -%}USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK{%- endcapture -%}
{%- assign supported_codes = settings.currency_conversion_supported_currencies | remove_first: shop.currency | upcase | split: ' ' | uniq -%}

<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>

{%- for code in supported_codes -%}
{%- if codes contains code -%}
<option value="{{ code }}">{{ code }}</option>
{%- endif -%}
{%- endfor -%}
</select>

{%- include 'icon' with 'select-arrow' -%}
</div>
</div>
{%- endcapture -%}
{%- endif -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
HEADER CONTENT
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- capture section_settings -%}
{
"navigationStyle": {{ section.settings.navigation_style | json }},
"hasTransparentHeader": {% if use_transparent_header %}true{% else %}false{% endif %},
"isSticky": {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<header id="section-{{ section.id }}"
class="Header Header--{{ section.settings.navigation_style }} {% unless section.settings.navigation_style == 'inline' %}Header--initialized{% endunless %} {% if use_transparent_header %}Header--transparent{% endif %}"
data-section-id="{{ section.id }}"
data-section-type="header"
data-section-settings='{{ section_settings }}'
role="banner">
<div class="Header__Wrapper">
<div class="Header__FlexItem Header__FlexItem--fill">
<button class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}" aria-expanded="false" data-action="open-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.open_sidebar' | t }}">
<span class="hidden-tablet-and-up">{%- include 'icon' with 'nav' -%}</span>
<span class="hidden-phone">{%- include 'icon' with 'nav-desktop' -%}</span>
</button>

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
DESKTOP NAVIGATION (if not using the sidebar mode)
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- unless use_sidebar_menu -%}
{%- assign main_menu_handle = section.settings.navigation_menu | default: 'main-menu' -%}
{%- assign main_menu = linklists[main_menu_handle] -%}

{%- assign mega_menu_names = '' -%}

{%- for block in section.blocks -%}
{%- if block.type == 'mega_menu' -%}
{%- assign mega_menu_names = mega_menu_names | append: block.settings.navigation_mega_menu | append: ',' -%}
{%- endif -%}
{%- endfor -%}

{%- assign mega_menu_names = mega_menu_names | downcase | split: ',' | compact -%}

<nav class="Header__MainNav hidden-pocket hidden-lap" aria-label="{{ 'header.navigation.title' | t }}">
<ul class="HorizontalList HorizontalList--spacingExtraLoose">
{%- for link in main_menu.links -%}
{%- assign downcased_link_title = link.title | downcase -%}
{%- assign use_mega_menu = false -%}

{%- capture menu_item_dropdown -%}
{%- if mega_menu_names contains downcased_link_title -%}
{%- for block in section.blocks -%}
{%- assign downcased_mega_menu_name = block.settings.navigation_mega_menu | downcase -%}

{%- if downcased_mega_menu_name != downcased_link_title -%}
{%- continue -%}
{%- endif -%}

{%- assign use_mega_menu = true -%}
{%- assign push_image_count = 0 -%}

{%- if block.settings.push_1_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- if block.settings.push_2_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- assign should_space_evenly = false -%}

{%- if push_image_count == 0 and link.links.size <= 3 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 1 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 2 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

<div class="MegaMenu {% if push_image_count != 0 and link.links.size == 0 %}MegaMenu--spacingCenter{% elsif should_space_evenly %}MegaMenu--spacingEvenly{% endif %} {% if push_image_count == 0 and link.links.size > 4 %}MegaMenu--grid{% endif %}" aria-hidden="true" {{ block.shopify_attributes }}>
<div class="MegaMenu__Inner">
{%- for sub_link in link.links -%}
<div class="MegaMenu__Item MegaMenu__Item--fit">
<a href="{{ sub_link.url }}" class="MegaMenu__Title Heading Text--subdued u-h7">{{ sub_link.title | title }}</a>

{%- if sub_link.links != blank -%}
<ul class="Linklist">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endfor -%}

{%- if push_image_count > 0 -%}
<div class="MegaMenu__Item" style="{% if push_image_count == 1 %}width: 370px; min-width: 250px;{% else %}width: 660px; min-width: 425px;{% endif %}">
{%- if block.settings.push_1_image -%}
<div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
{%- if block.settings.push_1_url != blank -%}
<a class="MegaMenu__PushLink" href="{{ block.settings.push_1_url }}">
{%- endif -%}

{%- assign max_width = 370 | at_most: block.settings.push_1_image.width -%}

<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_1_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_1_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_1_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_1_image.alt | escape }}">

<span class="Image__Loader"></span>
</div>

{%- if block.settings.push_1_heading != blank -%}
<p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_1_heading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_1_subheading != blank -%}
<p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_1_subheading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_1_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}

{%- if block.settings.push_2_image -%}
<div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
{%- if block.settings.push_2_url != blank -%}
<a class="MegaMenu__PushLink" href="{{ block.settings.push_2_url }}">
{%- endif -%}

{%- assign max_width = 370 | at_most: block.settings.push_2_image.width -%}

<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_2_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_2_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_2_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_2_image.alt | escape }}">

<span class="Image__Loader"></span>
</div>

{%- if block.settings.push_2_heading != blank -%}
<p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_2_heading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_2_subheading != blank -%}
<p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_2_subheading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_2_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
{%- endfor -%}
{%- elsif link.links != blank -%}
<div class="DropdownMenu" aria-hidden="true">
<ul class="Linklist">
{%- for sub_link in link.links -%}
<li class="Linklist__Item" {% if sub_link.links != blank %}aria-haspopup="true"{% endif %}>
<a href="{{ sub_link.url }}" class="Link Link--secondary">{{ sub_link.title | escape }} {% if sub_link.links != blank %}{% include 'icon' with 'select-arrow-right' %}{% endif %}</a>

{%- if sub_link.links != blank -%}
<div class="DropdownMenu" aria-hidden="true">
<ul class="Linklist">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- endcapture -%}

<li class="HorizontalList__Item {% if link.links == blank and link.active %}is-active{% endif %}" {% if menu_item_dropdown != blank %}aria-haspopup="true"{% endif %}>
<a href="{{ link.url }}" class="Heading u-h6">
{{- link.title | escape -}}

{%- if use_mega_menu or menu_item_dropdown == blank -%}
<span class="Header__LinkSpacer">{{ link.title | escape }}</span>
{%- endif -%}
</a>

{{- menu_item_dropdown -}}
</li>
{%- endfor -%}
</ul>
</nav>

{{- currency_conversion_select -}}
{%- endunless -%}
</div>

{%- capture header_logo -%}
<a href="/" class="Header__LogoLink">
{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}

<img class="Header__LogoImage Header__LogoImage--primary"
src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 3
}} 3
x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}">

{%- if use_transparent_header and section.settings.transparent_logo != blank -%}
<img class="Header__LogoImage Header__LogoImage--transparent"
src="{{ section.settings.transparent_logo | img_url: image_size }}"
srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.transparent_logo.alt | default: shop.name | escape }}">
{%- endif -%}
{%- else -%}
<span class="Heading u-h4">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- endcapture -%}

<div class="Header__FlexItem">
{%- if template == 'index' -%}
<h1 class="Header__Logo">{{ header_logo }}</h1>
{%- else -%}
<div class="Header__Logo">{{ header_logo }}</div>
{%- endif -%}
</div>

<div class="Header__FlexItem Header__FlexItem--fill">
{%- unless use_sidebar_menu -%}
<nav class="Header__SecondaryNav">
<ul class="HorizontalList HorizontalList--spacingLoose hidden-pocket hidden-lap">
{%- if settings.currency_conversion_enabled and section.settings.navigation_style == 'inline' -%}
<li class="HorizontalList__Item">
{{ currency_conversion_select }}
</li>
{%- endif -%}

{%- if shop.customer_accounts_enabled -%}
<li class="HorizontalList__Item">
<a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="Heading Link Link--primary Text--subdued u-h8">
{{- 'header.navigation.account' | t -}}
</a>
</li>
{%- endif -%}

<li class="HorizontalList__Item">
<a href="/search" class="Heading Link Link--primary Text--subdued u-h8" data-action="open-modal" aria-controls="Search">{{ 'header.navigation.search' | t }}</a>
</li>

<li class="HorizontalList__Item">
<a href="/cart" class="Heading u-h6" {% unless template == 'cart' or settings.cart_type == 'page' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endunless %}>{{ 'header.navigation.cart' | t }} (<span class="Header__CartCount">{{ cart.item_count }}</span>)</a>
</li>
</ul>
</nav>
{%- endunless -%}

<a href="/cart" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}" {% if settings.cart_type == 'drawer' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endif %}>
<span class="hidden-tablet-and-up">{%- include 'icon' with 'cart' -%}</span>
<span class="hidden-phone">{%- include 'icon' with 'cart-desktop' -%}</span>
<span class="Header__CartDot {% if cart.item_count > 0 %}is-visible{% endif %}"></span>
</a>
</div>
</div>
</header>

<style>
{%- if section.settings.use_sticky_header -%}
:root {
--use-sticky-header: 1;
}

.shopify-section--header {
position: -webkit-sticky;
position: sticky;
}
{%- endif -%}

{%- if use_transparent_header -%}
:root {
--header-is-not-transparent: 0;
--header-is-transparent: 1;
}

.shopify-section--header {
margin-bottom: calc(-1 * var(--header-height));
}

.supports-sticky .Header--transparent {
box-shadow: 0 -1px {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.25 }} inset;
color: {{ section.settings.transparent_text_color }};
}
{%- else -%}
:root {
--header-is-not-transparent: 1;
--header-is-transparent: 0;
}
{%- endif -%}
</style>

<script>
document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-header').offsetHeight + 'px');
</script>

{% schema %}
{
"name": "Header",
"class": "shopify-section--header",
"settings": [
{
"type": "checkbox",
"id": "use_sticky_header",
"label": "Use sticky header",
"default": true
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image",
"info": "200 x 60px png recommended"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 350,
"step": 5,
"unit": "px",
"label": "Logo image width",
"default": 140
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "navigation_menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "select",
"id": "navigation_style",
"label": "Navigation style",
"info": "Setting will default to center style if screen width cannot fit all the links.",
"options": [
{
"value": "sidebar",
"label": "Sidebar"
},
{
"value": "inline",
"label": "Inline"
},
{
"value": "center",
"label": "Center"
}
],
"default": "inline"
},
{
"type": "header",
"content": "Transparent header"
},
{
"type": "checkbox",
"id": "enable_transparent_header",
"label": "Enable on homepage",
"default": false
},
{
"type": "checkbox",
"id": "enable_transparent_header_collection",
"label": "Enable on collection pages",
"info": "Only if the collection has an image.",
"default": false
},
{
"type": "color",
"id": "transparent_text_color",
"label": "Text/icon color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "transparent_logo",
"label": "Logo image",
"info": "200 x 60px png recommended"
}
],
"blocks": [
{
"type": "mega_menu",
"name": "Mega menu",
"settings": [
{
"type": "text",
"id": "navigation_mega_menu",
"label": "Menu item",
"info": "Enter menu item to apply a mega menu dropdown. [Learn more](http://support.maestrooo.com/article/149-navigation-enabling-and-configuring-mega-menu)."
},
{
"type": "header",
"content": "Image push 1"
},
{
"type": "image_picker",
"id": "push_1_image",
"label": "Image",
"info": "740 x 460 px jpg recommended"
},
{
"type": "text",
"id": "push_1_heading",
"label": "Heading",
"default": "Example heading"
},
{
"type": "text",
"id": "push_1_subheading",
"label": "Sub-heading",
"default": "Example sub-heading"
},
{
"type": "url",
"id": "push_1_url",
"label": "Link"
},
{
"type": "header",
"content": "Image push 2"
},
{
"type": "image_picker",
"id": "push_2_image",
"label": "Image",
"info": "740 x 460 px jpg recommended"
},
{
"type": "text",
"id": "push_2_heading",
"label": "Heading",
"default": "Example heading"
},
{
"type": "text",
"id": "push_2_subheading",
"label": "Sub-heading",
"default": "Example sub-heading"
},
{
"type": "url",
"id": "push_2_url",
"label": "Link"
}
]
}
]
}
{% endschema %}

saffronthreads
Tourist
5 0 4

Hi,

In Prestige theme, the search bar is inside the sidebar menu in Mobile view.

Is there a way to pull out that search button on the mobile header next to the main menu as an icon next to the cart icon.

Please help 

KetanKumar
Shopify Partner
24911 2497 9035

@saffronthreads 

Sorry, you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
24911 2497 9035

@saffronthreads 

thanks for url

sorry i can't see any icon

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saffronthreads
Tourist
5 0 4

Yes. There is no Icon. I want to add a Search icon alongside the existing Cart Icon in Mobile view.

Currently the search option is appearing in sidebar which is not useful. Please help.

 

Attaching screenshot of home page in mobile view highlighting where we need the search Icon

Screenshot_20211016-150722.jpg

KetanKumar
Shopify Partner
24911 2497 9035

@saffronthreads 

you have check your theme setting?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saffronthreads
Tourist
5 0 4

In mobile view theme setting of home page only Currency Conversion option is available. No option to add a search icon

KetanKumar
Shopify Partner
24911 2497 9035

@saffronthreads 

ok yes its possible to add custom code search icon 

please share header code and search svg icon

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saffronthreads
Tourist
5 0 4

{%- assign use_transparent_header = false -%}

{%- if template == 'index' and section.settings.enable_transparent_header -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if template.name == 'collection' and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != 'no-image' -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if section.settings.navigation_style != 'sidebar' -%}
{%- assign use_sidebar_menu = false -%}
{%- else -%}
{%- assign use_sidebar_menu = true -%}
{%- endif -%}

{%- if settings.currency_conversion_enabled -%}
{%- capture currency_conversion_select -%}
<div class="Header__CurrencySelector Text--subdued Heading Link Link--primary u-h8 hidden-pocket hidden-lap">
<div class="Select Select--transparent">
<select class="CurrencySelector__Select u-h8" title="{{ 'header.navigation.currency_selector' | t | escape }}">
{%- capture codes -%}USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,BWP,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK{%- endcapture -%}
{%- assign supported_codes = settings.currency_conversion_supported_currencies | remove_first: shop.currency | upcase | split: ' ' | uniq -%}

<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>

{%- for code in supported_codes -%}
{%- if codes contains code -%}
<option value="{{ code }}">{{ code }}</option>
{%- endif -%}
{%- endfor -%}
</select>

{%- include 'icon' with 'select-arrow' -%}
</div>
</div>
{%- endcapture -%}
{%- endif -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
HEADER CONTENT
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- capture section_settings -%}
{
"navigationStyle": {{ section.settings.navigation_style | json }},
"hasTransparentHeader": {% if use_transparent_header %}true{% else %}false{% endif %},
"isSticky": {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<header id="section-{{ section.id }}"
class="Header Header--{{ section.settings.navigation_style }} {% unless section.settings.navigation_style == 'inline' %}Header--initialized{% endunless %} {% if use_transparent_header %}Header--transparent{% endif %}"
data-section-id="{{ section.id }}"
data-section-type="header"
data-section-settings='{{ section_settings }}'
role="banner">
<div class="Header__Wrapper">
<div class="Header__FlexItem Header__FlexItem--fill">
<button class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}" aria-expanded="false" data-action="open-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.open_sidebar' | t }}">
<span class="hidden-tablet-and-up">{%- include 'icon' with 'nav' -%}</span>
<span class="hidden-phone">{%- include 'icon' with 'nav-desktop' -%}</span>
</button>

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
DESKTOP NAVIGATION (if not using the sidebar mode)
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- unless use_sidebar_menu -%}
{%- assign main_menu_handle = section.settings.navigation_menu | default: 'main-menu' -%}
{%- assign main_menu = linklists[main_menu_handle] -%}

{%- assign mega_menu_names = '' -%}

{%- for block in section.blocks -%}
{%- if block.type == 'mega_menu' -%}
{%- assign mega_menu_names = mega_menu_names | append: block.settings.navigation_mega_menu | append: ',' -%}
{%- endif -%}
{%- endfor -%}

{%- assign mega_menu_names = mega_menu_names | downcase | split: ',' | compact -%}

<nav class="Header__MainNav hidden-pocket hidden-lap" aria-label="{{ 'header.navigation.title' | t }}">
<ul class="HorizontalList HorizontalList--spacingExtraLoose">
{%- for link in main_menu.links -%}
{%- assign downcased_link_title = link.title | downcase -%}
{%- assign use_mega_menu = false -%}

{%- capture menu_item_dropdown -%}
{%- if mega_menu_names contains downcased_link_title -%}
{%- for block in section.blocks -%}
{%- assign downcased_mega_menu_name = block.settings.navigation_mega_menu | downcase -%}

{%- if downcased_mega_menu_name != downcased_link_title -%}
{%- continue -%}
{%- endif -%}

{%- assign use_mega_menu = true -%}
{%- assign push_image_count = 0 -%}

{%- if block.settings.push_1_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- if block.settings.push_2_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- assign should_space_evenly = false -%}

{%- if push_image_count == 0 and link.links.size <= 3 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 1 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 2 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

<div class="MegaMenu {% if push_image_count != 0 and link.links.size == 0 %}MegaMenu--spacingCenter{% elsif should_space_evenly %}MegaMenu--spacingEvenly{% endif %} {% if push_image_count == 0 and link.links.size > 4 %}MegaMenu--grid{% endif %}" aria-hidden="true" {{ block.shopify_attributes }}>
<div class="MegaMenu__Inner">
{%- for sub_link in link.links -%}
<div class="MegaMenu__Item MegaMenu__Item--fit">
<a href="{{ sub_link.url }}" class="MegaMenu__Title Heading Text--subdued u-h7">{{ sub_link.title | title }}</a>

{%- if sub_link.links != blank -%}
<ul class="Linklist">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endfor -%}

{%- if push_image_count > 0 -%}
<div class="MegaMenu__Item" style="{% if push_image_count == 1 %}width: 370px; min-width: 250px;{% else %}width: 660px; min-width: 425px;{% endif %}">
{%- if block.settings.push_1_image -%}
<div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
{%- if block.settings.push_1_url != blank -%}
<a class="MegaMenu__PushLink" href="{{ block.settings.push_1_url }}">
{%- endif -%}

{%- assign max_width = 370 | at_most: block.settings.push_1_image.width -%}

<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_1_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_1_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_1_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_1_image.alt | escape }}">

<span class="Image__Loader"></span>
</div>

{%- if block.settings.push_1_heading != blank -%}
<p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_1_heading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_1_subheading != blank -%}
<p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_1_subheading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_1_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}

{%- if block.settings.push_2_image -%}
<div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
{%- if block.settings.push_2_url != blank -%}
<a class="MegaMenu__PushLink" href="{{ block.settings.push_2_url }}">
{%- endif -%}

{%- assign max_width = 370 | at_most: block.settings.push_2_image.width -%}

<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_2_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_2_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_2_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_2_image.alt | escape }}">

<span class="Image__Loader"></span>
</div>

{%- if block.settings.push_2_heading != blank -%}
<p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_2_heading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_2_subheading != blank -%}
<p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_2_subheading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_2_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
{%- endfor -%}
{%- elsif link.links != blank -%}
<div class="DropdownMenu" aria-hidden="true">
<ul class="Linklist">
{%- for sub_link in link.links -%}
<li class="Linklist__Item" {% if sub_link.links != blank %}aria-haspopup="true"{% endif %}>
<a href="{{ sub_link.url }}" class="Link Link--secondary">{{ sub_link.title | escape }} {% if sub_link.links != blank %}{% include 'icon' with 'select-arrow-right' %}{% endif %}</a>

{%- if sub_link.links != blank -%}
<div class="DropdownMenu" aria-hidden="true">
<ul class="Linklist">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- endcapture -%}

<li class="HorizontalList__Item {% if link.links == blank and link.active %}is-active{% endif %}" {% if menu_item_dropdown != blank %}aria-haspopup="true"{% endif %}>
<a href="{{ link.url }}" class="Heading u-h6">
{{- link.title | escape -}}

{%- if use_mega_menu or menu_item_dropdown == blank -%}
<span class="Header__LinkSpacer">{{ link.title | escape }}</span>
{%- endif -%}
</a>

{{- menu_item_dropdown -}}
</li>
{%- endfor -%}
</ul>
</nav>

{{- currency_conversion_select -}}
{%- endunless -%}
</div>

{%- capture header_logo -%}
<a href="/" class="Header__LogoLink">
{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}

<img class="Header__LogoImage Header__LogoImage--primary"
src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}">

{%- if use_transparent_header and section.settings.transparent_logo != blank -%}
<img class="Header__LogoImage Header__LogoImage--transparent"
src="{{ section.settings.transparent_logo | img_url: image_size }}"
srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.transparent_logo.alt | default: shop.name | escape }}">
{%- endif -%}
{%- else -%}
<span class="Heading u-h4">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- endcapture -%}

<div class="Header__FlexItem">
{%- if template == 'index' -%}
<div class="Header__Logo">{{ header_logo }}</div>
{%- else -%}
<div class="Header__Logo">{{ header_logo }}</div>
{%- endif -%}
</div>

<div class="Header__FlexItem Header__FlexItem--fill">
{%- unless use_sidebar_menu -%}
<nav class="Header__SecondaryNav">
<ul class="HorizontalList HorizontalList--spacingLoose hidden-pocket hidden-lap">
{%- if settings.currency_conversion_enabled and section.settings.navigation_style == 'inline' -%}
<li class="HorizontalList__Item">
{{ currency_conversion_select }}
</li>
{%- endif -%}

{%- if shop.customer_accounts_enabled -%}
<li class="HorizontalList__Item">
<a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="Heading Link Link--primary Text--subdued u-h8">
{{- 'header.navigation.account' | t -}}
</a>
</li>
{%- endif -%}

<li class="HorizontalList__Item">
<a href="/search" class="Heading Link Link--primary Text--subdued u-h8" data-action="open-modal" aria-controls="Search">{{ 'header.navigation.search' | t }}</a>
</li>

<li class="HorizontalList__Item">
<a href="/cart" class="Heading u-h6" {% unless template == 'cart' or settings.cart_type == 'page' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endunless %}>{{ 'header.navigation.cart' | t }} (<span class="Header__CartCount">{{ cart.item_count }}</span>)</a>
</li>
</ul>
</nav>
{%- endunless -%}

<a href="/cart" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}" {% if settings.cart_type == 'drawer' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endif %}>
<span class="hidden-tablet-and-up">{%- include 'icon' with 'cart' -%}</span>
<span class="hidden-phone">{%- include 'icon' with 'cart-desktop' -%}</span>
<span class="Header__CartDot {% if cart.item_count > 0 %}is-visible{% endif %}"></span>
</a>
</div>
</div>
</header>

<style>
{%- if section.settings.use_sticky_header -%}
:root {
--use-sticky-header: 1;
--use-unsticky-header: 0;
}

.shopify-section--header {
position: -webkit-sticky;
position: sticky;
}
{%- else -%}
:root {
--use-sticky-header: 0;
--use-unsticky-header: 1;
}
{%- endif -%}

{%- if section.settings.logo -%}
@media screen and (max-width: 640px) {
.Header__LogoImage {
max-width: {{ section.settings.mobile_logo_max_width }}px;
}
}
{%- endif -%}

{%- if use_transparent_header -%}
:root {
--header-is-not-transparent: 0;
--header-is-transparent: 1;
}

.shopify-section--header {
margin-bottom: calc(-1 * var(--header-height));
}

.supports-sticky .Header--transparent {
box-shadow: 0 -1px {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.25 }} inset;
color: {{ section.settings.transparent_text_color }};
}
{%- else -%}
:root {
--header-is-not-transparent: 1;
--header-is-transparent: 0;
}
{%- endif -%}
</style>

<script>
document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-header').offsetHeight + 'px');
</script>

{% schema %}
{
"name": "Header",
"class": "shopify-section--header",
"settings": [
{
"type": "checkbox",
"id": "use_sticky_header",
"label": "Use sticky header",
"default": true
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image",
"info": "200 x 60px png recommended"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 350,
"step": 5,
"unit": "px",
"label": "Logo image width",
"default": 140
},
{
"type": "range",
"id": "mobile_logo_max_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Mobile logo image width",
"default": 90
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "navigation_menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "select",
"id": "navigation_style",
"label": "Navigation style",
"info": "Setting will default to center style if screen width cannot fit all the links.",
"options": [
{
"value": "sidebar",
"label": "Sidebar"
},
{
"value": "inline",
"label": "Inline"
},
{
"value": "center",
"label": "Center"
}
],
"default": "inline"
},
{
"type": "header",
"content": "Transparent header"
},
{
"type": "checkbox",
"id": "enable_transparent_header",
"label": "Enable on homepage",
"default": false
},
{
"type": "checkbox",
"id": "enable_transparent_header_collection",
"label": "Enable on collection pages",
"info": "Only if the collection has an image.",
"default": false
},
{
"type": "color",
"id": "transparent_text_color",
"label": "Text/icon color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "transparent_logo",
"label": "Logo image",
"info": "200 x 60px png recommended"
}
],
"blocks": [
{
"type": "mega_menu",
"name": "Mega menu",
"settings": [
{
"type": "text",
"id": "navigation_mega_menu",
"label": "Menu item",
"info": "Enter menu item to apply a mega menu dropdown. [Learn more](http://support.maestrooo.com/article/149-navigation-enabling-and-configuring-mega-menu)."
},
{
"type": "header",
"content": "Image push 1"
},
{
"type": "image_picker",
"id": "push_1_image",
"label": "Image",
"info": "740 x 460 px jpg recommended"
},
{
"type": "text",
"id": "push_1_heading",
"label": "Heading",
"default": "Example heading"
},
{
"type": "text",
"id": "push_1_subheading",
"label": "Sub-heading",
"default": "Example sub-heading"
},
{
"type": "url",
"id": "push_1_url",
"label": "Link"
},
{
"type": "header",
"content": "Image push 2"
},
{
"type": "image_picker",
"id": "push_2_image",
"label": "Image",
"info": "740 x 460 px jpg recommended"
},
{
"type": "text",
"id": "push_2_heading",
"label": "Heading",
"default": "Example heading"
},
{
"type": "text",
"id": "push_2_subheading",
"label": "Sub-heading",
"default": "Example sub-heading"
},
{
"type": "url",
"id": "push_2_url",
"label": "Link"
}
]
}
]
}
{% endschema %}