FROM CACHE - en_header

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

1,237 Views
0 Likes
Report
Replies 20 (20)
dmwwebartisan
Shopify Partner
12266 2544 3679
‎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
1,090 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?

1,081 Views
0 Likes
Report
In response to MUCuser
dmwwebartisan
Shopify Partner
12266 2544 3679
‎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
1,078 Views
0 Likes
Report
In response to dmwwebartisan
MUCuser
Excursionist
27 0 5
‎10-26-2021 11:41 AM

https://interstellarbrands.de

1,074 Views
0 Likes
Report
In response to MUCuser
dmwwebartisan
Shopify Partner
12266 2544 3679
‎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
1,053 Views
0 Likes
Report
In response to dmwwebartisan
MUCuser
Excursionist
27 0 5
‎10-26-2021 11:50 AM

uwhawl

1,047 Views
0 Likes
Report
In response to MUCuser
dmwwebartisan
Shopify Partner
12266 2544 3679
‎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
1,039 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>

986 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?

1,025 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>
1,006 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. 

1,024 Views
0 Likes
Report
In response to MUCuser
dmwwebartisan
Shopify Partner
12266 2544 3679
‎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
1,037 Views
Report
In response to dmwwebartisan
MUCuser
Excursionist
27 0 5
‎10-26-2021 12:15 PM

here

1,028 Views
0 Likes
Report
code.txt
14 KB
In response to MUCuser
dmwwebartisan
Shopify Partner
12266 2544 3679
‎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
993 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?

978 Views
0 Likes
Report
In response to MUCuser
MUCuser
Excursionist
27 0 5
‎10-27-2021 06:47 AM

or even the icon itself?

974 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

968 Views
0 Likes
Report
In response to MUCuser
dmwwebartisan
Shopify Partner
12266 2544 3679
‎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
964 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

 

959 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) 

589 Views
0 Likes
Report
Community Browser

Community Blog Articles

cropped-shutterstock_2285098703.jpg
Donations Before Discounts: The Greatest Incentive

Make the shift from discounts to donations, and witness your business not only thrive fina...

By Holly Dec 4, 2023
cropped-SYSO-okt23-GROW.png
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...

On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...

By Arno Nov 27, 2023
cropped-shutterstock_offset_2207989361.jpg
Organize Your Products Like a Rainbow: Metafields and Color Sorting

You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...

By Skye Nov 8, 2023
Terms of Service Privacy Policy