@TheRealMan1 wrote:
@jmariegocela please share the code of header.liquid
{%- assign main_menu = linklists[section.settings.main_menu_link_list] -%}
{%- assign toolbar_menu = linklists[section.settings.toolbar_menu] -%}
{%- assign logo_alignment = 'left' -%}
{% if section.settings.main_menu_alignment == 'center-left' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-drawer' %}
{%- assign logo_alignment = 'center' -%}
{% endif %}
{%- assign dropdown_alignment = 'left' -%}
{% if section.settings.main_menu_alignment == 'left-center' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center' %}
{%- assign dropdown_alignment = 'center' -%}
{% endif %}
{% if section.settings.drawer_menu_style == 'Style 1' %}
{% render 'drawer-menu_1',
section: section,
main_menu: main_menu,
toolbar_menu: toolbar_menu,
logo_alignment: logo_alignment
%}
{% else %}
{% render 'drawer-menu_2',
section: section,
main_menu: main_menu,
toolbar_menu: toolbar_menu,
logo_alignment: logo_alignment
%}
{% endif %}
{% render 'cart-drawer' %}
{%- assign template_name = template | replace: '.', ' ' | truncatewords: 2, '' | handle -%}
{%- assign sticky_header = false -%}
{% if section.settings.header_style == 'sticky' %}
{%- assign sticky_header = true -%}
{% endif %}
{%- assign overlay_header = false -%}
{%- assign has_logo = false -%}
{% if template_name == 'index' and section.settings.sticky_index %}
{%- assign overlay_header = true -%}
{% endif %}
{% if template_name == 'collection' and collection.image and section.settings.sticky_collection %}
{%- assign overlay_header = true -%}
{% endif %}
<style>
[role="navigation"] .site-nav__link {
font-size: {{ settings.type_navigation_size }}px;
letter-spacing: 1px;
color: #424242;
color: {{ section.settings.main_menu_color | default: '#424242' }};
}
[role="navigation"] .site-nav__dropdown-link {
font-size: {{ settings.type_navigation_size }}px;
letter-spacing: 1px;
color: #727272;
color: {{ section.settings.dropdown_menu_color | default: '#727272' }};
}
.site-nav__dropdown-link.site-nav__dropdown-link--top-level {
font-size: {{ settings.type_header_size }}px;
}
{% if settings.type_navigation_capitalize %}
.site-nav__link, .mobile-nav__link--top-level {
text-transform: uppercase;
}
{% endif %}
{% if mainmenu.length > 6 %}
.site-nav__link {
padding-left: 10px;
padding-right: 10px;
}
{% endif %}
{% unless section.settings.mega_menu_images %}
.megamenu__colection-image {
display: none;
}
{% endunless %}
{%- if settings.color_header == settings.color_body_bg -%}
.site-header {
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
.toolbar + .header-sticky-wrapper .site-header {
border-top: 0;
}
{%- endif -%}
{%- if settings.color_announcement == settings.color_body_bg -%}
.announcement-bar {
border-bottom: 1px solid;
}
{%- endif -%}
{%- if section.settings.change_menu_color_text != blank and section.settings.change_menu_color_text != '' -%}
{% assign menu_arr = section.settings.change_menu_color_text | strip_html | newline_to_br | replace:'<br>', 'll_ll' | replace:'<br/>', 'll_ll' | replace:'<br />', 'll_ll' %}
{% assign menu_arr = menu_arr | split:'ll_ll' %}
{%- for menu_item in menu_arr -%}
[data-title_handle="{{menu_item | handle}}"] {color: {{section.settings.change_menu_color}} !important;}
{%- endfor -%}
{%- endif -%}
</style>
<div data-section-id="{{ section.id }}" data-section-type="header-section"
class="{% if overlay_header or section.settings.announcement_above_header %}announcement_top_true{% endif %} {% if section.settings.main_menu_alignment != "center" %}head_padd{% endif %} {% if section.settings.main_menu_alignment != 'center' and section.settings.main_menu_alignment != 'center-drawer' %}head_hide_text{% endif %}">
{% if overlay_header or section.settings.announcement_above_header %}
{% render 'announcement-bar', section: section %}
{% endif %}
<div class="header-sticky-wrapper">
<div class="header-wrapper{% if overlay_header %} header-wrapper--sticky is-light{% endif %}">
{% if section.settings.toolbar_social or section.settings.toolbar_menu != blank or section.settings.main_menu_alignment != 'center' %}
{% render 'toolbar',
section: section,
overlay_header: overlay_header,
toolbar_menu: toolbar_menu
%}
{% endif %}
<header class="site-header{% if settings.type_navigation_style == 'heading' %} site-header--heading-style{% endif %}"
data-sticky="{{ sticky_header }}">
<div class="page-width">
<div
class="header-layout header-layout--{{ section.settings.main_menu_alignment }}"
data-logo-align="{{ logo_alignment }}">
{% if logo_alignment == 'left' %}
<div class="header-item header-item--logo">
{% render 'header-logo-block', section: section %}
</div>
{% endif %}
{% if logo_alignment == 'left' and section.settings.main_menu_alignment != 'left-drawer' %}
<div class="header-item header-item--navigation{% if section.settings.main_menu_alignment == 'left-center' %} text-center{% endif %}">
{% if section.settings.header_megamenu == "Mega menu 1" %}
{% render 'header-desktop-nav', main_menu: main_menu %}
{% elsif section.settings.header_megamenu == "Mega menu 2" %}
{% render 'header-desktop-nav_mega2', main_menu: main_menu %}
{% else %}
{% render 'header-desktop-nav_simple', main_menu_links: main_menu.links %}
{% endif %}
</div>
{% endif %}
{% if logo_alignment == 'center' %}
<div class="header-item header-item--left header-item--navigation">
{% comment %}
{% if section.settings.main_menu_alignment == 'center-split' %}
<div class="site-nav small--hide">
<a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon js-search-header">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.title' | t }}</span>
</a>
</div>
{% endif %}
{% endcomment %}
{% if section.settings.main_menu_alignment == 'center-left' %}
{% if section.settings.header_megamenu == "Mega menu 1" %}
{% render 'header-desktop-nav', main_menu: main_menu %}
{% elsif section.settings.header_megamenu == "Mega menu 2" %}
{% render 'header-desktop-nav_mega2', main_menu: main_menu %}
{% else %}
{% render 'header-desktop-nav_simple', main_menu_links: main_menu.links %}
{% endif %}
{% endif %}
<div class="site-nav{% unless section.settings.main_menu_alignment == 'center-drawer' %} medium-up--hide{% endunless %}">
<button type="button"
class="site-nav__link site-nav__link--icon js-drawer-open-nav"
aria-controls="NavDrawer">
<svg width="46" height="28" viewBox="0 0 46 28"><g><g><path fill="none" stroke="#f18899" stroke-linecap="square" stroke-miterlimit="20" d="M10.464 17.5h25.072"/></g><g><path fill="none" stroke="#f18899" stroke-linecap="square" stroke-miterlimit="20" d="M10.464 10.5h25.072"/></g></g></svg>
<span>{{ 'general.drawers.navigation' | t }}</span>
</button>
</div>
{% if section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-drawer' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center-left' %}
<div class="site-nav__icons site_nav__icons_left mu__hide {% if section.settings.main_menu_alignment == 'center-left' %}md__show{% endif %}">
<a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon js-search-header search_layer_all">
{%- comment -%}
<span class="icon__text medium-down--hide">{{ 'general.search.title' | t }}</span>
{%- endcomment -%}
<input type="search" name="q" value="{{ search.terms | escape | replace: '*', '' }}" class="search_layer_input" aria-label="{{ 'general.search.placeholder' | t }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
</a>
<div class="header_ly">
<span class="ly-custom-1000"></span>
</div>
</div>
{% endif %}
</div>
{% if section.settings.main_menu_alignment == 'center-split' %}
{% render 'header-split-nav', main_menu: main_menu, section: section %}
{% endif %}
{% if section.settings.main_menu_alignment != 'center-split' %}
<div class="header-item header-item--logo">
{% render 'header-logo-block', section: section %}
</div>
{% endif %}
{% endif %}
<div class="header-item header-item--icons">
{% render 'header-icons', section: section %}
</div>
</div>
{% if section.settings.main_menu_alignment == 'center' %}
<div class="text-center">
{% if section.settings.header_megamenu == "Mega menu 1" %}
{% render 'header-desktop-nav', main_menu: main_menu %}
{% elsif section.settings.header_megamenu == "Mega menu 2" %}
{% render 'header-desktop-nav_mega2', main_menu: main_menu %}
{% else %}
{% render 'header-desktop-nav_simple', main_menu_links: main_menu.links %}
{% endif %}
</div>
{% endif %}
</div>
<div class="site-header__search-container">
<div class="site-header__search">
<div class="page-width">
<form action="{{ routes.search_url }}" method="get" role="search"
id="HeaderSearchForm"
class="site-header__search-form">
<input type="hidden" name="type" value="{{ settings.search_type }}">
<button type="submit" class="text-link site-header__search-btn site-header__search-btn--submit">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
<input type="search" name="q" value="{{ search.terms | escape | replace: '*', '' }}" placeholder="{{ 'general.search.placeholder' | t }}" class="site-header__search-input" aria-label="{{ 'general.search.placeholder' | t }}">
</form>
<button type="button" class="js-search-header-close text-link site-header__search-btn">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t | json }}</span>
</button>
</div>
</div>
</div>
{% unless template == 'customers/login' or template == 'customers/register' %}
<div class="sign-in-popup inner container" style="display: none;">
<div class="popup_login_all ">
<div class="popup_login_absolute">
{% render 'customer-login-page' %}
</div>
</div>
</div>
{% endunless %}
</header>
</div>
</div>
{% unless overlay_header or section.settings.announcement_above_header %}
{% render 'announcement-bar', section: section %}
{% endunless %}
</div>
<style>
{% for block in section.blocks %}
{% if block.type == 'colored_menu_item' %}
{% assign bs = block.settings %}
{% if bs.color != blank and bs.menu_items != blank %}
{% assign menuItems = bs.menu_items | split: ',' %}
{% for menuItem in menuItems %}
{% if menuItem contains '|' %}
{% assign parentMenuItem = menuItem | split: '|' | first | strip | handleize %}
{% assign childMenuItem = menuItem | split: '|' | last | strip | handleize %}
.site-nav__link--has-dropdown[data-title_handle="{{parentMenuItem}}"] + .site-nav__dropdown .site-nav__link[data-title_handle="{{ childMenuItem }}"]:not(:hover),
.site-nav__link--has-dropdown[data-title_handle="{{parentMenuItem}}"] + .site-nav__dropdown .site-nav__dropdown-link[data-title_handle="{{ childMenuItem }}"]:not(:hover) {
color: {{ bs.color }} !important;
}
{% else %}
{% assign menuItemStrip = menuItem | strip | handleize %}
.site-nav__link[data-title_handle="{{menuItemStrip}}"]:not(:hover),
.site-nav__dropdown-link[data-title_handle="{{ menuItemStrip }}"]:not(:hover) {
color: {{ bs.color }} !important;
}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
</style>
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "link_list",
"id": "main_menu_link_list",
"label": "Navigation",
"default": "main-menu"
},
{
"type": "select",
"id": "drawer_menu_style",
"label": "Drawer Menu Style",
"default": "Style 1",
"options": [
{
"value": "Style 1",
"label": "Style 1"
},
{
"value": "Style 2",
"label": "Style 2"
}
]
},
{
"type": "select",
"id": "header_megamenu",
"label": "Menu type selection",
"default": "Mega menu 2",
"options": [
{
"value": "Simple Menu",
"label": "Simple Menu"
},
{
"value": "Mega menu 1",
"label": "Mega menu 1"
},
{
"value": "Mega menu 2",
"label": "Mega menu 2"
}
]
},
{
"type": "checkbox",
"id": "mega_menu_images",
"label": "Show mega menu images",
"default": true,
"info": "Only for Mega menu 1.[How to create a mega menu](https://archetypethemes.co/blogs/impulse/how-do-i-create-a-mega-menu)"
},
{
"type": "select",
"id": "main_menu_alignment",
"label": "Header layout",
"default": "left",
"options": [
{
"value": "left",
"label": "Logo left, menu left"
},
{
"value": "left-center",
"label": "Logo left, menu center"
},
{
"value": "left-drawer",
"label": "Logo left, menu drawer"
},
{
"value": "center-left",
"label": "Logo center, menu left"
},
{
"value": "center-split",
"label": "Logo center, menu split"
},
{
"value": "center",
"label": "Logo center, menu below"
},
{
"value": "center-drawer",
"label": "Logo center, menu drawer"
}
]
},
{
"type": "select",
"id": "header_style",
"label": "Header style",
"default": "normal",
"options": [
{
"value": "normal",
"label": "Normal"
},
{
"value": "sticky",
"label": "Sticky"
}
]
},
{
"type": "checkbox",
"id": "sticky_index",
"label": "Overlay header over home page",
"default": false
},
{
"type": "checkbox",
"id": "sticky_collection",
"label": "Overlay header over collection",
"info": "(if collection image is enabled)",
"default": false
},
{
"type": "color",
"id": "main_menu_color",
"label": "Main Menu color"
},
{
"type": "color",
"id": "dropdown_menu_color",
"label": "Dropdown Menu color"
},
{
"type": "richtext",
"id": "change_menu_color_text",
"label": "Change the color of menu items",
"info": "Each menu item on a new line"
},
{
"type": "color",
"id": "change_menu_color",
"label": "Menu item color"
},
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "checkbox",
"id": "announcement_compact",
"label": "Use compact style"
},
{
"type": "checkbox",
"id": "announcement_above_header",
"label": "Always show above header"
},
{
"type": "header",
"content": "Toolbar"
},
{
"type": "link_list",
"id": "toolbar_menu",
"label": "Navigation",
"info": "This menu won't show dropdown items"
},
{
"type": "checkbox",
"id": "toolbar_social",
"label": "Show social icons"
},
{
"type": "header",
"content": "Mobile menu Content"
},
{
"type": "text",
"id": "mob_content_heading",
"label": "Heading"
},
{
"type": "richtext",
"id": "mob_content_text",
"label": "Text"
},
{
"type": "text",
"id": "mob_content_phone",
"label": "Phone number"
},
{
"type": "text",
"id": "mob_content_whatsapp",
"label": "WhatsApp number",
"info": "Wihtout '+' and '0' symbols in internation numbers"
},
{
"type": "text",
"id": "mob_content_email",
"label": "Email"
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "image_picker",
"id": "logo-inverted",
"label": "White logo",
"info": "Used when on top of an image"
},
{
"type": "range",
"id": "desktop_logo_width",
"label": "Desktop logo width",
"default": 200,
"min": 100,
"max": 400,
"step": 10,
"unit": "px"
},
{
"type": "range",
"id": "mobile_logo_width",
"label": "Mobile logo width",
"default": 140,
"min": 60,
"max": 200,
"step": 10,
"unit": "px",
"info": "Set as a max-width, may appear smaller"
}
]
},
{
"type": "announcement",
"name": "Announcement",
"limit": 3,
"settings": [
{
"type": "text",
"id": "text",
"label": "Heading",
"default": "Hassle-free returns"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "30-day postage paid returns"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
},
{
"type": "menu_image",
"name": "Menu image",
"settings": [
{
"type": "text",
"id": "title",
"label": "Menu title"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
},
{
"type": "colored_menu_item",
"name": "Colored Menu item",
"settings": [
{
"type": "text",
"id": "title",
"label": "Color title",
"info": "optional"
},
{
"type": "color",
"id": "color",
"label": "Color"
},
{
"type": "textarea",
"id": "menu_items",
"label": "Menu items",
"info": "Separated by comma"
}
]
}
],
"default": {
"settings": {}
}
}
{% endschema %}
