Happening now! Shopify Community AMA: PayPal Express Migration to Shopify Payments | Ask your questions to be answered by our team.

Re: Switching positions of icons (narrative Theme)

Switching positions of icons (narrative Theme)

MUCuser
Excursionist
27 0 5

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

Replies 20 (20)

dmwwebartisan
Shopify Partner
12321 2552 3729

@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
MUCuser
Excursionist
27 0 5

Hello Sir, 

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

dmwwebartisan
Shopify Partner
12321 2552 3729

@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
MUCuser
Excursionist
27 0 5
dmwwebartisan
Shopify Partner
12321 2552 3729

@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
MUCuser
Excursionist
27 0 5

uwhawl

dmwwebartisan
Shopify Partner
12321 2552 3729

@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
MUCuser
Excursionist
27 0 5

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

MUCuser
Excursionist
27 0 5

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

MUCuser
Excursionist
27 0 5
{% 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>
MUCuser
Excursionist
27 0 5

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

dmwwebartisan
Shopify Partner
12321 2552 3729

@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
MUCuser
Excursionist
27 0 5

here

dmwwebartisan
Shopify Partner
12321 2552 3729

@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
MUCuser
Excursionist
27 0 5

Thank you so much sir. It worked. 

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

MUCuser
Excursionist
27 0 5

or even the icon itself?

MUCuser
Excursionist
27 0 5

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

dmwwebartisan
Shopify Partner
12321 2552 3729

@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
MUCuser
Excursionist
27 0 5

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

 

MUCuser
Excursionist
27 0 5

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)