Solved

SEPARATE THE HEADERS & BASKET/CART/SOCIALS

demor_support
Excursionist
55 0 4

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

 

Screen Shot 2022-11-09 at 3.59.04 PM.png

 

Thank you!!

 

 

Accepted Solutions (3)
Litos
Globetrotter
688 169 143

This is an accepted solution.

Hi @demor_support,

Please follow the steps below:

- Step 1: Change all code nav-contents.liquid file

<div class="mobile-wrapper">
<div class="header-cart__wrapper">
<a href="/cart" class="CartToggle header-cart">
{% include 'icon-cart' %}
</a>
<span class="header-cart__bubble cartCount{% if cart.item_count < 1 %} hidden-count{% endif %}"></span>
</div>
<div class="logo-wrapper{% if section.settings.logo %} logo-wrapper--image{% endif %}">
{% if template.name == 'index' %}
<h1 class="h4 header-logo">
{% else %}
<div class="h4 header-logo">
{% endif %}
<a href="/">
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
class="logo--color"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}">
{% else %}
<span class="logo--text">{{ shop.name }}</span>
{% endif %}
{% if transparent_header and section.settings.transparent_logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.transparent_logo | img_url: image_size }}"
class="logo--transparent"
srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.transparent_logo.alt | default: shop.name }}">
{% endif %}
</a>
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<a href class="menuToggle header-hamburger"{% if nav-contents == 'mobile' %} aria-haspopup="true" aria-expanded="false" aria-controls="ariaHamburger"{% endif %}>
{% include 'icon-nav' %}
</a>
</div>
<div class="header-menu nav-wrapper">
<ul class="main-menu accessibleNav" role="navigation" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
{% 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 %}
</ul>
<ul class="main-menu accessibleNav" role="navigation" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
<li class="child ">
  <a href="/search" class="nav-link">Search</a>
</li>
<li class="cart-text-link">
<a href="/cart" class="CartToggle">
{% include 'icon-cart' %}
<span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}">(<span class="money">{{ cart.total_price | money }}</span>)</span>
</a>
</li>
{% if section.settings.header_social_enable %}
{% if settings.social_twitter_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_twitter_link }}" title="{{ shop.name }} on Twitter" target="_blank">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="fallback-text">Twitter</span>
</a>
</li>
{% endif %}
{% if settings.social_facebook_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_facebook_link }}" title="{{ shop.name }} on Facebook" target="_blank">
<span class="icon icon-facebook" aria-hidden="true"></span>
<span class="fallback-text">Facebook</span>
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_instagram_link }}" title="{{ shop.name }} on Instagram" target="_blank">
<span class="icon icon-instagram" aria-hidden="true"></span>
<span class="fallback-text">Instagram</span>
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_pinterest_link }}" title="{{ shop.name }} on Pinterest" target="_blank">
<span class="icon icon-pinterest" aria-hidden="true"></span>
<span class="fallback-text">Pinterest</span>
</a>
</li>
{% endif %}
{% if settings.social_google_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_google_link }}" title="{{ shop.name }} on Google Plus" target="_blank">
<span class="icon icon-google_plus" aria-hidden="true"></span>
<span class="fallback-text">Google Plus</span>
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_youtube_link }}" title="{{ shop.name }} on Youtube" target="_blank">
<span class="icon icon-youtube" aria-hidden="true"></span>
<span class="fallback-text">Youtube</span>
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_vimeo_link }}" title="{{ shop.name }} on Vimeo" target="_blank">
<span class="icon icon-vimeo" aria-hidden="true"></span>
<span class="fallback-text">Vimeo</span>
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_tumblr_link }}" title="{{ shop.name }} on Tumblr" target="_blank">
<span class="icon icon-tumblr" aria-hidden="true"></span>
<span class="fallback-text">Tumblr</span>
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_fancy_link }}" title="{{ shop.name }} on Fancy" target="_blank">
<span class="icon icon-fancy" aria-hidden="true"></span>
<span class="fallback-text">Fancy</span>
</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>

- 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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Litos
Globetrotter
688 169 143

This is an accepted solution.

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.

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Litos
Globetrotter
688 169 143

This is an accepted solution.

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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 14 (14)

Litos
Globetrotter
688 169 143

Hi @demor_support,

Please send me the code of header.liquid file, I will help you to edit it

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
demor_support
Excursionist
55 0 4

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 -%}

<style>
.header--transparent:not(.header--sticky):not(.header--stuck) .nav--desktop .main-menu>li>a{
color: {{ section.settings.transparent_text_color }};
}
.header--transparent:not(.header--sticky):not(.header--stuck) .icon{
fill: {{ section.settings.transparent_text_color }};
}
.header--transparent:not(.header--sticky):not(.header--stuck) .header-cart__bubble{
background-color: {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.5 }};
}
</style>


<div class="header__wrapper{% if transparent_header %} header--transparent{% endif %}"
data-header-transparent="{{ transparent_header }}"
data-header-sticky="{{ section.settings.header_sticky }}"
data-section-id="{{ section.id }}"
data-section-type="header">

{% if section.settings.header_enable_account or section.settings.header_enable_search or section.settings.header_message != '' %}
<div class="info-bar showMobile">
<div class="wrapper text-center">

{% if shop.customer_accounts_enabled and section.settings.header_enable_account %}
<div class="header-account-link">
<a href="/account"><img src="{{ 'account.svg' | asset_url }}"></a>
</div>
{% endif %}

{% if section.settings.header_message != '' %}
<div class="header-message uppercase{% if section.settings.header_enable_account or section.settings.header_enable_search %} header-message--crowded{% endif %}">
{% if section.settings.header_message_url != blank %}
<a href="{{ section.settings.header_message_url }}">{{ section.settings.header_message | escape }}</a>
{% else %}
{{ section.settings.header_message | escape }}
{% endif %}
</div>
{% endif %}

{% if section.settings.header_enable_search %}
<div class="header-search__wrapper">
<div class="header-search">
<form action="/search" method="get" class="input-group search" role="search">
{% if section.settings.search_only_products %}<input type="hidden" name="type" value="product">{% endif %}
<input class="search-bar" type="search" name="q">
<button type="submit" class="btn search-btn"></button>
</form>
</div>
</div>
{% endif %}

</div>
</div>
{% endif %}

<header class="site-header {{ section.settings.height }}" role="banner">
<div class="wrapper">
<div class="nav--desktop">
{% include 'nav-contents' with 'desktop' %}
</div>
<div class="nav--mobile">
{% include 'nav-contents' with 'mobile' %}
</div>
</div>
</header>
</div>


<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if section.settings.logo %}
{% assign image_size = section.settings.logo.width | append:'x' %}
"logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.social_twitter_link | json }},
{{ settings.social_facebook_link | json }},
{{ settings.social_instagram_link | json }},
{{ settings.social_pinterest_link | json }},
{{ settings.social_google_link | json }},
{{ settings.social_youtube_link | json }},
{{ settings.social_vimeo_link | json }},
{{ settings.social_tumblr_link | json }},
{{ settings.social_fancy_link | json }}
],
"url": {{ shop.url | append: page.url | json }}
}
</script>

{% if template.name == 'index' %}
{% assign potential_action_target = shop.url | append: "/search?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% 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 %}

Litos
Globetrotter
688 169 143

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.

Screenshot.png

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
demor_support
Excursionist
55 0 4

hi @Litos here's the nav-contents code you requested

 

<div class="mobile-wrapper">
<div class="header-cart__wrapper">
<a href="/cart" class="CartToggle header-cart">
{% include 'icon-cart' %}
</a>
<span class="header-cart__bubble cartCount{% if cart.item_count < 1 %} hidden-count{% endif %}"></span>
</div>
<div class="logo-wrapper{% if section.settings.logo %} logo-wrapper--image{% endif %}">
{% if template.name == 'index' %}
<h1 class="h4 header-logo">
{% else %}
<div class="h4 header-logo">
{% endif %}
<a href="/">
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
class="logo--color"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}">
{% else %}
<span class="logo--text">{{ shop.name }}</span>
{% endif %}
{% if transparent_header and section.settings.transparent_logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.transparent_logo | img_url: image_size }}"
class="logo--transparent"
srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.transparent_logo.alt | default: shop.name }}">
{% endif %}
</a>
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<a href class="menuToggle header-hamburger"{% if nav-contents == 'mobile' %} aria-haspopup="true" aria-expanded="false" aria-controls="ariaHamburger"{% endif %}>
{% include 'icon-nav' %}
</a>
</div>
<div class="header-menu nav-wrapper">
<ul class="main-menu accessibleNav" role="navigation" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
{% 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 %}
<li class="cart-text-link">
<a href="/cart" class="CartToggle">
{% include 'icon-cart' %}
<span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}">(<span class="money">{{ cart.total_price | money }}</span>)</span>
</a>
</li>
{% if section.settings.header_social_enable %}
{% if settings.social_twitter_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_twitter_link }}" title="{{ shop.name }} on Twitter" target="_blank">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="fallback-text">Twitter</span>
</a>
</li>
{% endif %}
{% if settings.social_facebook_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_facebook_link }}" title="{{ shop.name }} on Facebook" target="_blank">
<span class="icon icon-facebook" aria-hidden="true"></span>
<span class="fallback-text">Facebook</span>
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_instagram_link }}" title="{{ shop.name }} on Instagram" target="_blank">
<span class="icon icon-instagram" aria-hidden="true"></span>
<span class="fallback-text">Instagram</span>
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_pinterest_link }}" title="{{ shop.name }} on Pinterest" target="_blank">
<span class="icon icon-pinterest" aria-hidden="true"></span>
<span class="fallback-text">Pinterest</span>
</a>
</li>
{% endif %}
{% if settings.social_google_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_google_link }}" title="{{ shop.name }} on Google Plus" target="_blank">
<span class="icon icon-google_plus" aria-hidden="true"></span>
<span class="fallback-text">Google Plus</span>
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_youtube_link }}" title="{{ shop.name }} on Youtube" target="_blank">
<span class="icon icon-youtube" aria-hidden="true"></span>
<span class="fallback-text">Youtube</span>
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_vimeo_link }}" title="{{ shop.name }} on Vimeo" target="_blank">
<span class="icon icon-vimeo" aria-hidden="true"></span>
<span class="fallback-text">Vimeo</span>
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_tumblr_link }}" title="{{ shop.name }} on Tumblr" target="_blank">
<span class="icon icon-tumblr" aria-hidden="true"></span>
<span class="fallback-text">Tumblr</span>
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_fancy_link }}" title="{{ shop.name }} on Fancy" target="_blank">
<span class="icon icon-fancy" aria-hidden="true"></span>
<span class="fallback-text">Fancy</span>
</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>

Litos
Globetrotter
688 169 143

This is an accepted solution.

Hi @demor_support,

Please follow the steps below:

- Step 1: Change all code nav-contents.liquid file

<div class="mobile-wrapper">
<div class="header-cart__wrapper">
<a href="/cart" class="CartToggle header-cart">
{% include 'icon-cart' %}
</a>
<span class="header-cart__bubble cartCount{% if cart.item_count < 1 %} hidden-count{% endif %}"></span>
</div>
<div class="logo-wrapper{% if section.settings.logo %} logo-wrapper--image{% endif %}">
{% if template.name == 'index' %}
<h1 class="h4 header-logo">
{% else %}
<div class="h4 header-logo">
{% endif %}
<a href="/">
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
class="logo--color"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}">
{% else %}
<span class="logo--text">{{ shop.name }}</span>
{% endif %}
{% if transparent_header and section.settings.transparent_logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.transparent_logo | img_url: image_size }}"
class="logo--transparent"
srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.transparent_logo.alt | default: shop.name }}">
{% endif %}
</a>
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<a href class="menuToggle header-hamburger"{% if nav-contents == 'mobile' %} aria-haspopup="true" aria-expanded="false" aria-controls="ariaHamburger"{% endif %}>
{% include 'icon-nav' %}
</a>
</div>
<div class="header-menu nav-wrapper">
<ul class="main-menu accessibleNav" role="navigation" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
{% 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 %}
</ul>
<ul class="main-menu accessibleNav" role="navigation" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
<li class="child ">
  <a href="/search" class="nav-link">Search</a>
</li>
<li class="cart-text-link">
<a href="/cart" class="CartToggle">
{% include 'icon-cart' %}
<span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}">(<span class="money">{{ cart.total_price | money }}</span>)</span>
</a>
</li>
{% if section.settings.header_social_enable %}
{% if settings.social_twitter_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_twitter_link }}" title="{{ shop.name }} on Twitter" target="_blank">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="fallback-text">Twitter</span>
</a>
</li>
{% endif %}
{% if settings.social_facebook_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_facebook_link }}" title="{{ shop.name }} on Facebook" target="_blank">
<span class="icon icon-facebook" aria-hidden="true"></span>
<span class="fallback-text">Facebook</span>
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_instagram_link }}" title="{{ shop.name }} on Instagram" target="_blank">
<span class="icon icon-instagram" aria-hidden="true"></span>
<span class="fallback-text">Instagram</span>
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_pinterest_link }}" title="{{ shop.name }} on Pinterest" target="_blank">
<span class="icon icon-pinterest" aria-hidden="true"></span>
<span class="fallback-text">Pinterest</span>
</a>
</li>
{% endif %}
{% if settings.social_google_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_google_link }}" title="{{ shop.name }} on Google Plus" target="_blank">
<span class="icon icon-google_plus" aria-hidden="true"></span>
<span class="fallback-text">Google Plus</span>
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_youtube_link }}" title="{{ shop.name }} on Youtube" target="_blank">
<span class="icon icon-youtube" aria-hidden="true"></span>
<span class="fallback-text">Youtube</span>
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_vimeo_link }}" title="{{ shop.name }} on Vimeo" target="_blank">
<span class="icon icon-vimeo" aria-hidden="true"></span>
<span class="fallback-text">Vimeo</span>
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_tumblr_link }}" title="{{ shop.name }} on Tumblr" target="_blank">
<span class="icon icon-tumblr" aria-hidden="true"></span>
<span class="fallback-text">Tumblr</span>
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li class="social-items">
<a class="social-links icon-fallback-text" href="{{ settings.social_fancy_link }}" title="{{ shop.name }} on Fancy" target="_blank">
<span class="icon icon-fancy" aria-hidden="true"></span>
<span class="fallback-text">Fancy</span>
</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>

- 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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
demor_support
Excursionist
55 0 4

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?

 

demor_support_0-1668123354470.png

 

Litos
Globetrotter
688 169 143

Hi @demor_support,

Please send me the preview link, I will help you check it

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
demor_support
Excursionist
55 0 4

@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. 

Screen Shot 2022-11-11 at 12.01.54 PM.png

https://demor.com.au/?_ab=0&_fd=0&_sc=1

Litos
Globetrotter
688 169 143

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 - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
demor_support
Excursionist
55 0 4
Litos
Globetrotter
688 169 143

This is an accepted solution.

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.

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
demor_support
Excursionist
55 0 4

yeah, it's working now. thanks!!

demor_support
Excursionist
55 0 4

hey @Litos 

 

can you help me reposition the header based on underlined part?

 

demor_support_0-1668224716125.png

 

Would really appreciate your help on this.


Thanks!

Litos
Globetrotter
688 169 143

This is an accepted solution.

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!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.