Hello,
How can I separate the headers & the basket/car/socials as per below pic?
Here’s my customized store URL since it’s not published yet.
https://demor.com.au/?_ab=0&_fd=0&_sc=1
Thank you!!
Hi @demor_support ,
Please send me the code of header.liquid file, I will help you to edit it
here’s the code of the header.liquid file
{%- assign transparent_header = true -%}
{%- if template contains ‘collection’ and collection.image and section.settings.transparent_collection -%}
{%- assign transparent_header = true -%}
{%- elsif template contains ‘article’ and article.image and section.settings.transparent_article -%}
{%- assign transparent_header = true -%}
{%- elsif template contains ‘blog’ and section.settings.transparent_blog -%}
{%- assign transparent_header = true -%}
{%- elsif template contains ‘page’ and section.settings.transparent_page -%}
{%- assign transparent_header = true -%}
{%- elsif template == ‘index’ and section.settings.transparent_home -%}
{%- assign transparent_header = true -%}
{%- endif -%}
{% if section.settings.header_enable_account or section.settings.header_enable_search or section.settings.header_message != ‘’ %}
{% if shop.customer_accounts_enabled and section.settings.header_enable_account %}
{% if section.settings.header_message != ‘’ %}
{% if section.settings.header_message_url != blank %}
{{ section.settings.header_message | escape }}
{% else %}
{{ section.settings.header_message | escape }}
{% endif %}
{% endif %}
{% if section.settings.header_enable_search %}
{% if section.settings.search_only_products %}{% endif %}
{% include 'nav-contents' with 'desktop' %}
{% include 'nav-contents' with 'mobile' %}
{% if template.name == ‘index’ %}
{% assign potential_action_target = shop.url | append: “/search?q={search_term_string}” %}
{% endif %}
{% schema %}
{
“name”: “Header”,
“settings”: [
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”
},
{
“type”: “range”,
“id”: “logo_max_limit”,
“min”: 5,
“max”: 495,
“step”: 5,
“unit”: “px”,
“label”: “logo width”,
“default”: 120
},
{
“type”: “link_list”,
“label”: “Menu”,
“id”: “main_menu_linklist”
},
{
“type”: “header”,
“content”: “Meganav image”
},
{
“type”: “image_picker”,
“id”: “meganav_image”,
“label”: “Meganav image”,
“info”: “500 x 800px .jpg max”
},
{
“type”: “url”,
“id”: “meganav_link”,
“label”: “Meganav Image Link”
},
{
“type”: “header”,
“content”: “Sticky header”
},
{
“type”: “select”,
“id”: “header_sticky”,
“options”: [
{ “value”: “static”, “label”: “Default header”},
{ “value”: “sticky”, “label”: “Sticky header”},
{ “value”: “scroll”, “label”: “Sticky header only when scrolling up”}
],
“label”: “Header behavior”,
“default”: “static”
},
{
“type”: “header”,
“content”: “Transparent header”
},
{
“type”: “checkbox”,
“id”: “transparent_home”,
“label”: “Enable on the home page”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_collection”,
“label”: “Enable on collections”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_blog”,
“label”: “Enable on the blog”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_article”,
“label”: “Enable on articles”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “transparent_page”,
“label”: “Enable on pages”,
“default”: false
},
{
“type”: “color”,
“id”: “transparent_text_color”,
“label”: “Text and icons color”,
“default”: “#ffffff”
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “Alternate logo”
},
{
“type”: “header”,
“content”: “Top Bar”
},
{
“type”: “text”,
“id”: “header_message”,
“label”: “Announcement text”,
“info”: “45 characters or less recommended”
},
{
“type”: “url”,
“id”: “header_message_url”,
“label”: “Announcement link”
},
{
“type”: “checkbox”,
“id”: “header_enable_account”,
“default”: true,
“label”: “Show account link in header”
},
{
“type”: “checkbox”,
“id”: “header_enable_search”,
“default”: true,
“label”: “Show search in header”
},
{
“type”: “checkbox”,
“id”: “search_only_products”,
“label”: “Only search products”
},
{
“type”: “checkbox”,
“id”: “header_social_enable”,
“label”: “Show social icons”,
“default”:true
}
]
}
{% endschema %}
Hi @demor_support ,
Please send me the code of nav-contents.liquid file, because the code is added here, I will check it for you.
hi @Litos here’s the nav-contents code you requested
{% if template.name == 'index' %}
{% else %}
{% else %}
{% endif %}
{% else %}
{% endif %}
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
![{{ section.settings.logo.alt | default: shop.name }}]()
{% else %}
{{ shop.name }}
{% endif %}
{% if transparent_header and section.settings.transparent_logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
![{{ section.settings.transparent_logo.alt | default: shop.name }}]()
{% endif %}
{% if template.name == 'index' %}
{% else %}
-
{% if section.settings.main_menu_linklist %}
{% assign main_menu_linklist = section.settings.main_menu_linklist %}
{% else %}
{% assign main_menu_linklist = 'main-menu' %}
{% endif %}
{% for link in linklists[main_menu_linklist].links %}
{% include 'nav-item' %}
{% endfor %}
- {% include 'icon-cart' %} ({{ cart.total_price | money }}) {% if section.settings.header_social_enable %} {% if settings.social_twitter_link != blank %}
- Google Plus {% endif %} {% if settings.social_youtube_link != blank %}
- Youtube {% endif %} {% if settings.social_vimeo_link != blank %}
- Vimeo {% endif %} {% if settings.social_tumblr_link != blank %}
- Tumblr {% endif %} {% if settings.social_fancy_link != blank %}
- Fancy {% endif %} {% endif %}
Hi @demor_support ,
Please follow the steps below:
- Step 1: Change all code nav-contents.liquid file
{% include 'icon-cart' %}
{% if template.name == 'index' %}
#
{% else %}
{% endif %}
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
{% else %}
{{ shop.name }}
{% endif %}
{% if transparent_header and section.settings.transparent_logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
{% endif %}
{% if template.name == 'index' %}
{% else %}
{% endif %}
{% include 'icon-nav' %}
{% if section.settings.main_menu_linklist %}
{% assign main_menu_linklist = section.settings.main_menu_linklist %}
{% else %}
{% assign main_menu_linklist = 'main-menu' %}
{% endif %}
{% for link in linklists[main_menu_linklist].links %}
{% include 'nav-item' %}
{% endfor %}
- Search
- {% include 'icon-cart' %}
({{ cart.total_price | money }})
{% if section.settings.header_social_enable %}
{% if settings.social_twitter_link != blank %}
- Twitter
{% endif %}
{% if settings.social_facebook_link != blank %}
- Facebook
{% endif %}
{% if settings.social_instagram_link != blank %}
- Instagram
{% endif %}
{% if settings.social_pinterest_link != blank %}
- Pinterest
{% endif %}
{% if settings.social_google_link != blank %}
- Google Plus
{% endif %}
{% if settings.social_youtube_link != blank %}
- Youtube
{% endif %}
{% if settings.social_vimeo_link != blank %}
- Vimeo
{% endif %}
{% if settings.social_tumblr_link != blank %}
- Tumblr
{% endif %}
{% if settings.social_fancy_link != blank %}
- Fancy
{% endif %}
{% endif %}
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.showDesktop .header-menu {
width: 100%;
display: flex;
justify-content: space-between;
gap: 15px;
padding-left: 20px;
}
- Step 3: Go to Navigation > Menu and remove the search link.
Hope it helps!
thank you!! it’s working now! @Litos
btw, i’ve got another problem here, the logo doesn’t appear on the red line. not sure what’s happening there. can you also help me on this?
Hi @demor_support ,
Please send me the preview link, I will help you check it
@Litos here’s the Store url
https://demor.com.au/?_ab=0&_fd=0&_sc=1
The logo disappears when you ticked the “Enable on the homepage” on the TRANSPARENT HEADER section.
Hi @demor_support ,
I cant check it through the screenshot, can you turn it on and send me the preview site link? I will check it.
@Litos here’s preview link
Hi @demor_support ,
I checked and when you activate ‘Enable on the homepage’ it will show ‘Alternate logo’ instead of ‘Logo image’ so you just need to upload ‘Alternate logo’ it will display fine.
1 Like
yeah, it’s working now. thanks!!
1 Like
hey @Litos
can you help me reposition the header based on underlined part?
Would really appreciate your help on this.
Thanks!
Hi @demor_support ,
Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.site-header .wrapper {
max-width: 1500px !important;
}
Hope it helps!
1 Like