FROM CACHE - en_header
Promotion image
Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Switching positions of icons (narrative Theme)

Switching positions of icons (narrative Theme)

MUCuser
Excursionist
27 0 5
‎10-26-2021 11:29 AM

Hello dear Shopify-Community, 

I use the Narrative Theme and wanted to ask how I can switch the position of the following icons? And is it possible to lower the thickness of the customer login icon? 

Bildschirmfoto 2021-10-26 um 17.25.09.png

2,540 Views
0 Likes
Report
Replies 20 (20)

dmwwebartisan
Shopify Partner
12323 2552 3732
‎10-26-2021 11:32 AM

@MUCuser 

Please share your store URL & sections/header.liquid file code .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
2,348 Views
0 Likes
Report
In response to dmwwebartisan

MUCuser
Excursionist
27 0 5
‎10-26-2021 11:37 AM

Hello Sir, 

i will send u my URL and the password via Email, if its okay?

2,339 Views
0 Likes
Report
In response to MUCuser

dmwwebartisan
Shopify Partner
12323 2552 3732
‎10-26-2021 11:39 AM

@MUCuser 

please share only url in post 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
2,336 Views
0 Likes
Report
In response to dmwwebartisan

MUCuser
Excursionist
27 0 5
‎10-26-2021 11:41 AM

https://interstellarbrands.de

2,332 Views
0 Likes
Report
In response to MUCuser

dmwwebartisan
Shopify Partner
12323 2552 3732
‎10-26-2021 11:49 AM

@MUCuser 

Please share store front password . after work change the password .

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
2,311 Views
0 Likes
Report
In response to dmwwebartisan

MUCuser
Excursionist
27 0 5
‎10-26-2021 11:50 AM

uwhawl

2,305 Views
0 Likes
Report
In response to MUCuser

dmwwebartisan
Shopify Partner
12323 2552 3732
‎10-26-2021 11:52 AM

@MUCuser 

Please share your sections/header.liquid file code.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
2,297 Views
0 Likes
Report
In response to dmwwebartisan

MUCuser
Excursionist
27 0 5
‎10-26-2021 11:54 AM

{% if section.settings.enable_transparent and request.page_type == 'index' %}
<style>
html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .burger-icon {
background-color: {{ section.settings.transparent_text_color }};
}

html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__cart .icon,
html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__bag .icon {
fill: {{ section.settings.transparent_text_color }};
}

html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) a.site-header__logo {
color: {{ section.settings.transparent_text_color }};
}

html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__navigation::after,
html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__cart::after {
border-color: {{ section.settings.transparent_text_color }};
}
</style>
{% endif %}
<div class="site-header{% if request.page_type == 'index' %} site-header--homepage{% if section.settings.enable_transparent %} site-header--transparent{% endif %}{% endif %}" data-section-id="{{ section.id }}" data-section-type="header-section" data-drawer-push {% if section.settings.enable_transparent and request.page_type == 'index' %} data-transparent-header="true"{% endif %}>
<header class="site-header__wrapper" role="banner">
{% if section.settings.show_announcement %}
{% if section.settings.home_page_only == false or request.page_type == 'index' %}
<style>
.announcement-bar {
background-color: {{ section.settings.announcement_color_bg }};
}

.announcement-bar--link:hover {
{% assign brightness = section.settings.announcement_color_bg | color_brightness %}

{% if brightness <= 192 %}
{% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
background-color: {{ section.settings.announcement_color_bg | color_lighten: lightenAmount }};
{% else %}
{% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
background-color: {{ section.settings.announcement_color_bg | color_darken: darkenAmount }};
{% endif %}
}

.announcement-bar__message,
.announcement-bar__close {
color: {{ section.settings.announcement_color_text }};
}
</style>

{% if section.settings.announcement_link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.announcement_link }}" class="announcement-bar announcement-bar--link">
{% endif %}

<p class="announcement-bar__message page-width">
{% if section.settings.announcement_icon != 'none' %}
{%- assign icon = 'icon-' | append: section.settings.announcement_icon -%}
{% include icon %}
{% endif %}
{{ section.settings.announcement_text | escape }}
</p>
<button class="announcement-bar__close btn btn--clear" aria-expanded="true">{% include 'icon-close' %}</button>

{% if section.settings.announcement_link == blank %}
</div>
{% else %}
</a>
{% endif %}

{% endif %}
{% endif %}

<div class="site-header-sections page-width">
<nav class="site-header__section site-header__section--button"
data-site-navigation role="navigation"
>
<button class="site-header__navigation btn btn--clear btn--square"
aria-expanded="false"
data-navigation-button
>
<span class="burger-icon burger-icon--top"></span>
<span class="burger-icon burger-icon--mid"></span>
<span class="burger-icon burger-icon--bottom"></span>
<span class="icon__fallback-text">{{ 'general.header.menu' | t }}</span>
</button>
<div class="navigation supports-no-js critical-hide" data-section-id="{{ section.id }}" data-section-type="navigation" aria-hidden=true>
<div class="navigation__container">
<ul class="navigation__links">
{% for link in linklists[section.settings.primary_navigation].links%}
{% assign child_list_handle = link.title | handleize %}
{% if link.links != blank %}
<li class="navigation__link navigation__has-sublinks navigation__has-sublinks--collapsed navigation__entrance-animation">
<button class="navigation__expand-sublinks" aria-expanded="{% if link.active %}true{% else %}false{% endif %}">
<span aria-hidden="true">{{ link.title }}</span>
<span class="visually-hidden">{{ 'general.navigation.toggle_sublinks' | t: link_title: link.title }}</span>
{% include 'icon-arrow-down' %}
</button>
<div class="navigation__sublinks-container">
<ul class="navigation__sublinks">
{% for childlink in link.links %}
<li class="navigation__sublink{% if childlink.links != blank %} navigation__has-sublinks navigation__has-sublinks--collapsed{% endif %}">
{% if childlink.links != blank %}
<button class="navigation__expand-sublinks navigation__expand-sublinks--third-level" aria-expanded="{% if link.active %}true{% else %}false{% endif %}">
<span aria-hidden="true">{{ childlink.title }}</span>
<span class="visually-hidden">{{ 'general.navigation.toggle_sublinks' | t: link_title: childlink.title }}</span>
{% include 'icon-arrow-down' %}
</button>
<div class="navigation__sublinks-container">
<ul class="navigation__sublinks navigation__sublinks--third-level">
{% for grandchildlink in childlink.links %}
<li class="navigation__sublink--third-level">
<a href="{{ grandchildlink.url }}"{% if grandchildlink.active %} aria-current="page"{% endif %}>{{ grandchildlink.title | escape }}</a>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<a href="{{ childlink.url }}"{% if childlink.active %} aria-current="page"{% endif %}>{{ childlink.title | escape }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</li>
{% else %}
<li class="navigation__link navigation__entrance-animation{% if link.active %} navigation__link--active{% endif %}">
<a href="{{ link.url }}"{% if link.active %} aria-current="page"{% endif %}>{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>

<ul class="navigation__links">
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="navigation__link navigation__link--secondary navigation__entrance-animation">
{% if customer.first_name != blank %}
{% capture first_name %}{{ customer.first_name }}{% endcapture %}
<a href="{{ routes.account_url }}">{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}</a>
{% else %}
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
{% endif %}
</li>
<li class="navigation__link navigation__link--secondary navigation__entrance-animation">
<a href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t }}</a>
</li>
{% else %}
<li class="navigation__link navigation__link--secondary navigation__entrance-animation">
<a href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a>
</li>
<li class="navigation__link navigation__link--secondary navigation__entrance-animation">
<a href="{{ routes.account_register_url }}">{{ 'layout.customer.create_account' | t }}</a>
</li>
{% endif %}
{% endif %}
{% for link in linklists[section.settings.secondary_navigation].links %}
<li class="navigation__link navigation__link--secondary navigation__entrance-animation{% if link.active %} navigation__link--active{% endif %}">
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>

{% if section.settings.show_social_icons %}
<div class="navigation__social-sharing navigation__entrance-animation">
{% include 'social-links', disableTab: true, largeIcons: true %}
</div>
{% endif %}

{% include 'search-bar', animate: true, disableTab: true %}
</div>
</div>
</nav>
<div class="site-header__section site-header__section--title">
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with `h1` tag on homepage, div on other pages.
{% endcomment %}
{% if request.page_type == 'index' %}
<h1 class="site-header__logo-wrapper h4" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="site-header__logo-wrapper h4" itemscope itemtype="http://schema.org/Organization">
{% endif %}

<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo">
{%- capture image_size %}x{{ section.settings.logo_max_height }}{% endcapture -%}

{% if section.settings.logo %}
<style>
.site-header__logo-image {
height: {{ section.settings.logo_max_height | append: 'px' }};
}
</style>

<img class="site-header__logo-image" 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" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

{% if request.page_type == 'index' and section.settings.enable_transparent %}
{% if section.settings.transparent_logo == blank %}
{%- assign transparent_logo = section.settings.logo -%}
{% else %}
{%- assign transparent_logo = section.settings.transparent_logo -%}
{% endif %}

<img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}"
itemprop="logo">
{% endif %}
{% else %}
{{ shop.name }}
{% endif %}
</a>

{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<div class="site-header__section site-header__section--button">
<a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
{%- assign icon = 'icon-header-' | append: section.settings.icon %}
{% include icon %}
<span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
<span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
</a>
<a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>
</a>
</div>
</div>
</header>
</div>

2,244 Views
0 Likes
Report
In response to dmwwebartisan

MUCuser
Excursionist
27 0 5
‎10-26-2021 11:55 AM

how to do that? u mean all of the code?

2,283 Views
0 Likes
Report
In response to MUCuser

MUCuser
Excursionist
27 0 5
‎10-26-2021 11:59 AM 
{% if section.settings.enable_transparent and request.page_type == 'index' %}
  <style>
    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .burger-icon {
      background-color: {{ section.settings.transparent_text_color }};
    }

    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__cart .icon,
    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__bag .icon {
      fill: {{ section.settings.transparent_text_color }};
    }

    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) a.site-header__logo {
      color: {{ section.settings.transparent_text_color }};
    }

    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__navigation::after,
    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__cart::after {
      border-color: {{ section.settings.transparent_text_color }};
    }
  </style>
{% endif %}
<div class="site-header{% if request.page_type == 'index' %} site-header--homepage{% if section.settings.enable_transparent %} site-header--transparent{% endif %}{% endif %}" data-section-id="{{ section.id }}" data-section-type="header-section" data-drawer-push {% if section.settings.enable_transparent and request.page_type == 'index' %} data-transparent-header="true"{% endif %}>
  <header class="site-header__wrapper" role="banner">
    {% if section.settings.show_announcement %}
      {% if section.settings.home_page_only == false or request.page_type == 'index' %}
        <style>
          .announcement-bar {
            background-color: {{ section.settings.announcement_color_bg }};
          }

          .announcement-bar--link:hover {
            {% assign brightness = section.settings.announcement_color_bg | color_brightness %}

            {% if brightness <= 192 %}
              {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
              background-color: {{ section.settings.announcement_color_bg | color_lighten: lightenAmount }};
            {% else %}
              {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
              background-color: {{ section.settings.announcement_color_bg | color_darken: darkenAmount }};
            {% endif %}
          }

          .announcement-bar__message,
          .announcement-bar__close {
            color: {{ section.settings.announcement_color_text }};
          }
        </style>

        {% if section.settings.announcement_link == blank %}
          <div class="announcement-bar">
        {% else %}
          <a href="{{ section.settings.announcement_link }}" class="announcement-bar announcement-bar--link">
        {% endif %}

          <p class="announcement-bar__message page-width">
            {% if section.settings.announcement_icon != 'none' %}
              {%- assign icon = 'icon-' | append: section.settings.announcement_icon -%}
              {% include icon %}
            {% endif %}
            {{ section.settings.announcement_text | escape }}
          </p>
          <button class="announcement-bar__close btn btn--clear" aria-expanded="true">{% include 'icon-close' %}</button>

        {% if section.settings.announcement_link == blank %}
          </div>
        {% else %}
          </a>
        {% endif %}

      {% endif %}
    {% endif %}

    <div class="site-header-sections page-width">
      <nav class="site-header__section site-header__section--button"
        data-site-navigation role="navigation"
      >
        <button class="site-header__navigation btn btn--clear btn--square"
          aria-expanded="false"
          data-navigation-button
        >
          <span class="burger-icon burger-icon--top"></span>
          <span class="burger-icon burger-icon--mid"></span>
          <span class="burger-icon burger-icon--bottom"></span>
          <span class="icon__fallback-text">{{ 'general.header.menu' | t }}</span>
        </button>
        <div class="navigation supports-no-js critical-hide" data-section-id="{{ section.id }}" data-section-type="navigation" aria-hidden=true>
          <div class="navigation__container">
            <ul class="navigation__links">
              {% for link in linklists[section.settings.primary_navigation].links%}
                {% assign child_list_handle = link.title | handleize %}
                {% if link.links != blank %}
                  <li class="navigation__link navigation__has-sublinks navigation__has-sublinks--collapsed navigation__entrance-animation">
                    <button class="navigation__expand-sublinks" aria-expanded="{% if link.active %}true{% else %}false{% endif %}">
                      <span aria-hidden="true">{{ link.title }}</span>
                      <span class="visually-hidden">{{ 'general.navigation.toggle_sublinks' | t: link_title: link.title }}</span>
                      {% include 'icon-arrow-down' %}
                    </button>
                    <div class="navigation__sublinks-container">
                      <ul class="navigation__sublinks">
                        {% for childlink in link.links %}
                          <li class="navigation__sublink{% if childlink.links != blank %} navigation__has-sublinks navigation__has-sublinks--collapsed{% endif %}">
                            {% if childlink.links != blank %}
                              <button class="navigation__expand-sublinks navigation__expand-sublinks--third-level" aria-expanded="{% if link.active %}true{% else %}false{% endif %}">
                                <span aria-hidden="true">{{ childlink.title }}</span>
                                <span class="visually-hidden">{{ 'general.navigation.toggle_sublinks' | t: link_title: childlink.title }}</span>
                                {% include 'icon-arrow-down' %}
                              </button>
                              <div class="navigation__sublinks-container">
                                <ul class="navigation__sublinks navigation__sublinks--third-level">
                                  {% for grandchildlink in childlink.links %}
                                    <li class="navigation__sublink--third-level">
                                      <a href="{{ grandchildlink.url }}"{% if grandchildlink.active %} aria-current="page"{% endif %}>{{ grandchildlink.title | escape }}</a>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            {% else %}
                              <a href="{{ childlink.url }}"{% if childlink.active %} aria-current="page"{% endif %}>{{ childlink.title | escape }}</a>
                            {% endif %}
                          </li>
                        {% endfor %}
                      </ul>
                    </div>
                  </li>
                {% else %}
                  <li class="navigation__link navigation__entrance-animation{% if link.active %} navigation__link--active{% endif %}">
                    <a href="{{ link.url }}"{% if link.active %} aria-current="page"{% endif %}>{{ link.title }}</a>
                  </li>
                {% endif %}
              {% endfor %}
            </ul>

            <ul class="navigation__links">
              {% if shop.customer_accounts_enabled %}
                {% if customer %}
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    {% if customer.first_name != blank %}
                      {% capture first_name %}{{ customer.first_name }}{% endcapture %}
                      <a href="{{ routes.account_url }}">{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}</a>
                    {% else %}
                      <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
                    {% endif %}
                  </li>
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t }}</a>
                  </li>
                {% else %}
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a>
                  </li>
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="{{ routes.account_register_url }}">{{ 'layout.customer.create_account' | t }}</a>
                  </li>
                {% endif %}
              {% endif %}
              {% for link in linklists[section.settings.secondary_navigation].links %}
                <li class="navigation__link navigation__link--secondary navigation__entrance-animation{% if link.active %} navigation__link--active{% endif %}">
                  <a href="{{ link.url }}">{{ link.title }}</a>
                </li>
              {% endfor %}
            </ul>

            {% if section.settings.show_social_icons %}
              <div class="navigation__social-sharing navigation__entrance-animation">
                {% include 'social-links', disableTab: true, largeIcons: true %}
              </div>
            {% endif %}

            {% include 'search-bar', animate: true, disableTab: true %}
          </div>
        </div>
      </nav>
      <div class="site-header__section site-header__section--title">
        {% comment %}
        Use the uploaded logo from theme settings if enabled.
        Site name gets precedence with `h1` tag on homepage, div on other pages.
        {% endcomment %}
        {% if request.page_type == 'index' %}
          <h1 class="site-header__logo-wrapper h4" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="site-header__logo-wrapper h4" itemscope itemtype="http://schema.org/Organization">
        {% endif %}

        <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo">
          {%- capture image_size %}x{{ section.settings.logo_max_height }}{% endcapture -%}

          {% if section.settings.logo %}
            <style>
              .site-header__logo-image {
                height: {{ section.settings.logo_max_height | append: 'px' }};
              }
            </style>

            <img class="site-header__logo-image" 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" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

            {% if request.page_type == 'index' and section.settings.enable_transparent %}
              {% if section.settings.transparent_logo == blank %}
                {%- assign transparent_logo = section.settings.logo -%}
              {% else %}
                {%- assign transparent_logo = section.settings.transparent_logo -%}
              {% endif %}

              <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}"
                      itemprop="logo">
            {% endif %}
          {% else %}
            {{ shop.name }}
          {% endif %}
        </a>

        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>
      <div class="site-header__section site-header__section--button">
        <a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
          {%- assign icon = 'icon-header-' | append: section.settings.icon %}
          {% include icon %}
          <span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
          <span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
        </a>
        <a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart">
    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>
</a>
      </div>
    </div>
  </header>
</div>
2,264 Views
0 Likes
Report
In response to MUCuser

MUCuser
Excursionist
27 0 5
‎10-26-2021 12:05 PM

somehow I can't upload the whole code, I send it via Email to you. 

2,282 Views
0 Likes
Report
In response to MUCuser

dmwwebartisan
Shopify Partner
12323 2552 3732
‎10-26-2021 12:07 PM

@MUCuser 

Navigate to the edit code section of your theme by going to: Online Store > Themes > Actions (next to your current theme) > Edit Code

2021-10-26_21-36_dmwstore1 ~ Edit ~ Narrative.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
2,295 Views
1 Like
Report
In response to dmwwebartisan

MUCuser
Excursionist
27 0 5
‎10-26-2021 12:15 PM

here

2,286 Views
0 Likes
Report
code.txt
14 KB
In response to MUCuser

dmwwebartisan
Shopify Partner
12323 2552 3732
‎10-26-2021 10:40 PM

@MUCuser 

Please replace following code your Sections/header.liquid file .

{% if section.settings.enable_transparent and request.page_type == 'index' %}
  <style>
    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .burger-icon {
      background-color: {{ section.settings.transparent_text_color }};
    }

    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__cart .icon,
    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__bag .icon {
      fill: {{ section.settings.transparent_text_color }};
    }

    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) a.site-header__logo {
      color: {{ section.settings.transparent_text_color }};
    }

    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__navigation::after,
    html:not(.supports-no-js) body:not(.navigation-open) .site-header--transparent:not(.site-header--fixed) .site-header__cart::after {
      border-color: {{ section.settings.transparent_text_color }};
    }
  </style>
{% endif %}
<div class="site-header{% if request.page_type == 'index' %} site-header--homepage{% if section.settings.enable_transparent %} site-header--transparent{% endif %}{% endif %}" data-section-id="{{ section.id }}" data-section-type="header-section" data-drawer-push {% if section.settings.enable_transparent and request.page_type == 'index' %} data-transparent-header="true"{% endif %}>
  <header class="site-header__wrapper" role="banner">
    {% if section.settings.show_announcement %}
      {% if section.settings.home_page_only == false or request.page_type == 'index' %}
        <style>
          .announcement-bar {
            background-color: {{ section.settings.announcement_color_bg }};
          }

          .announcement-bar--link:hover {
            {% assign brightness = section.settings.announcement_color_bg | color_brightness %}

            {% if brightness <= 192 %}
              {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
              background-color: {{ section.settings.announcement_color_bg | color_lighten: lightenAmount }};
            {% else %}
              {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
              background-color: {{ section.settings.announcement_color_bg | color_darken: darkenAmount }};
            {% endif %}
          }

          .announcement-bar__message,
          .announcement-bar__close {
            color: {{ section.settings.announcement_color_text }};
          }
        </style>

        {% if section.settings.announcement_link == blank %}
          <div class="announcement-bar">
        {% else %}
          <a href="{{ section.settings.announcement_link }}" class="announcement-bar announcement-bar--link">
        {% endif %}

          <p class="announcement-bar__message page-width">
            {% if section.settings.announcement_icon != 'none' %}
              {%- assign icon = 'icon-' | append: section.settings.announcement_icon -%}
              {% include icon %}
            {% endif %}
            {{ section.settings.announcement_text | escape }}
          </p>
          <button class="announcement-bar__close btn btn--clear" aria-expanded="true">{% include 'icon-close' %}</button>

        {% if section.settings.announcement_link == blank %}
          </div>
        {% else %}
          </a>
        {% endif %}

      {% endif %}
    {% endif %}

    <div class="site-header-sections page-width">
      <nav class="site-header__section site-header__section--button"
        data-site-navigation role="navigation"
      >
        <button class="site-header__navigation btn btn--clear btn--square"
          aria-expanded="false"
          data-navigation-button
        >
          <span class="burger-icon burger-icon--top"></span>
          <span class="burger-icon burger-icon--mid"></span>
          <span class="burger-icon burger-icon--bottom"></span>
          <span class="icon__fallback-text">{{ 'general.header.menu' | t }}</span>
        </button>
        <div class="navigation supports-no-js critical-hide" data-section-id="{{ section.id }}" data-section-type="navigation" aria-hidden=true>
          <div class="navigation__container">
            <ul class="navigation__links">
              {% for link in linklists[section.settings.primary_navigation].links%}
                {% assign child_list_handle = link.title | handleize %}
                {% if link.links != blank %}
                  <li class="navigation__link navigation__has-sublinks navigation__has-sublinks--collapsed navigation__entrance-animation">
                    <button class="navigation__expand-sublinks" aria-expanded="{% if link.active %}true{% else %}false{% endif %}">
                      <span aria-hidden="true">{{ link.title }}</span>
                      <span class="visually-hidden">{{ 'general.navigation.toggle_sublinks' | t: link_title: link.title }}</span>
                      {% include 'icon-arrow-down' %}
                    </button>
                    <div class="navigation__sublinks-container">
                      <ul class="navigation__sublinks">
                        {% for childlink in link.links %}
                          <li class="navigation__sublink{% if childlink.links != blank %} navigation__has-sublinks navigation__has-sublinks--collapsed{% endif %}">
                            {% if childlink.links != blank %}
                              <button class="navigation__expand-sublinks navigation__expand-sublinks--third-level" aria-expanded="{% if link.active %}true{% else %}false{% endif %}">
                                <span aria-hidden="true">{{ childlink.title }}</span>
                                <span class="visually-hidden">{{ 'general.navigation.toggle_sublinks' | t: link_title: childlink.title }}</span>
                                {% include 'icon-arrow-down' %}
                              </button>
                              <div class="navigation__sublinks-container">
                                <ul class="navigation__sublinks navigation__sublinks--third-level">
                                  {% for grandchildlink in childlink.links %}
                                    <li class="navigation__sublink--third-level">
                                      <a href="{{ grandchildlink.url }}"{% if grandchildlink.active %} aria-current="page"{% endif %}>{{ grandchildlink.title | escape }}</a>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            {% else %}
                              <a href="{{ childlink.url }}"{% if childlink.active %} aria-current="page"{% endif %}>{{ childlink.title | escape }}</a>
                            {% endif %}
                          </li>
                        {% endfor %}
                      </ul>
                    </div>
                  </li>
                {% else %}
                  <li class="navigation__link navigation__entrance-animation{% if link.active %} navigation__link--active{% endif %}">
                    <a href="{{ link.url }}"{% if link.active %} aria-current="page"{% endif %}>{{ link.title }}</a>
                  </li>
                {% endif %}
              {% endfor %}
            </ul>

            <ul class="navigation__links">
              {% if shop.customer_accounts_enabled %}
                {% if customer %}
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    {% if customer.first_name != blank %}
                      {% capture first_name %}{{ customer.first_name }}{% endcapture %}
                      <a href="{{ routes.account_url }}">{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}</a>
                    {% else %}
                      <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
                    {% endif %}
                  </li>
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="{{ routes.account_logout_url }}">{{ 'layout.customer.log_out' | t }}</a>
                  </li>
                {% else %}
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="{{ routes.account_login_url }}">{{ 'layout.customer.log_in' | t }}</a>
                  </li>
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="{{ routes.account_register_url }}">{{ 'layout.customer.create_account' | t }}</a>
                  </li>
                {% endif %}
              {% endif %}
              {% for link in linklists[section.settings.secondary_navigation].links %}
                <li class="navigation__link navigation__link--secondary navigation__entrance-animation{% if link.active %} navigation__link--active{% endif %}">
                  <a href="{{ link.url }}">{{ link.title }}</a>
                </li>
              {% endfor %}
            </ul>

            {% if section.settings.show_social_icons %}
              <div class="navigation__social-sharing navigation__entrance-animation">
                {% include 'social-links', disableTab: true, largeIcons: true %}
              </div>
            {% endif %}

            {% include 'search-bar', animate: true, disableTab: true %}
          </div>
        </div>
      </nav>
      <div class="site-header__section site-header__section--title">
        {% comment %}
        Use the uploaded logo from theme settings if enabled.
        Site name gets precedence with `h1` tag on homepage, div on other pages.
        {% endcomment %}
        {% if request.page_type == 'index' %}
          <h1 class="site-header__logo-wrapper h4" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="site-header__logo-wrapper h4" itemscope itemtype="http://schema.org/Organization">
        {% endif %}

        <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo">
          {%- capture image_size %}x{{ section.settings.logo_max_height }}{% endcapture -%}

          {% if section.settings.logo %}
            <style>
              .site-header__logo-image {
                height: {{ section.settings.logo_max_height | append: 'px' }};
              }
            </style>

            <img class="site-header__logo-image" 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" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

            {% if request.page_type == 'index' and section.settings.enable_transparent %}
              {% if section.settings.transparent_logo == blank %}
                {%- assign transparent_logo = section.settings.logo -%}
              {% else %}
                {%- assign transparent_logo = section.settings.transparent_logo -%}
              {% endif %}

              <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}"
                      itemprop="logo">
            {% endif %}
          {% else %}
            {{ shop.name }}
          {% endif %}
        </a>

        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>
      <div class="site-header__section site-header__section--button">
       
        <a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart">
    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>
</a>
 <a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
          {%- assign icon = 'icon-header-' | append: section.settings.icon %}
          {% include icon %}
          <span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
          <span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
        </a>
      </div>
    </div>
  </header>
</div>
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
2,251 Views
0 Likes
Report
In response to dmwwebartisan

MUCuser
Excursionist
27 0 5
‎10-27-2021 06:39 AM

Thank you so much sir. It worked. 

Is it also possible to change the thickness of the login icon?

2,236 Views
0 Likes
Report
In response to MUCuser

MUCuser
Excursionist
27 0 5
‎10-27-2021 06:47 AM

or even the icon itself?

2,232 Views
0 Likes
Report
In response to MUCuser

MUCuser
Excursionist
27 0 5
‎10-27-2021 07:02 AM

and when I swipe over the shopping cart it enlarges, but the login icon remains the same size

2,226 Views
0 Likes
Report
In response to MUCuser

dmwwebartisan
Shopify Partner
12323 2552 3732
‎10-27-2021 07:04 AM

@MUCuser 

Please share your store front password & screenshot what do you want !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
2,222 Views
0 Likes
Report
In response to dmwwebartisan

MUCuser
Excursionist
27 0 5
‎10-27-2021 07:22 AM

Password is: test

I now have 3 problems: 

 

1) the Icon is too thick. 

Bildschirmfoto 2021-10-27 um 13.16.10.png

2) when I swipe over the icons with my mouse, the shopping cart is zoomed in, but not the login icon. It stays the same size. 

3) is it possible to change the login icon to something like this? 

Bildschirmfoto 2021-10-27 um 13.14.07.png

 

2,217 Views
0 Likes
Report
In response to MUCuser

MUCuser
Excursionist
27 0 5
‎10-27-2021 08:10 AM

Edit: 

 

4) if I click on the login icon I can login but if I click it again after I already logged in, it still leads me back to the login site instead of my account (where the Adress Information etc. is) 

1,847 Views
0 Likes
Report

Community Blog Articles

starting.webp
Dropshipping Viral Products to Sell in 2025

As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....

By JasonH Nov 27, 2024
top members.webp
Shining a spotlight on our top members of October 2024!

Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...

By JasonH Nov 14, 2024
bfcm-deals-and-discounts.jpg
Tips for Running BFCM Deals and Discounts 2024

In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...

By JasonH Nov 13, 2024
Terms of Service Privacy Policy