Switching positions of icons (narrative Theme)

[MUCuser]

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?

[dmwwebartisan]

@MUCuser

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

Thanks!

[MUCuser]

Hello Sir,

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

[dmwwebartisan]

@MUCuser

please share only url in post

[MUCuser]

https://interstellarbrands.de

[dmwwebartisan]

@MUCuser

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

[MUCuser]

uwhawl

[dmwwebartisan]

@MUCuser

Please share your sections/header.liquid file code.

[MUCuser]

{% if section.settings.enable_transparent and request.page_type == ‘index’ %}

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

{% endif %}

{% if section.settings.show_announcement %} {% if section.settings.home_page_only == false or request.page_type == 'index' %} .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 }};
}

{% if section.settings.announcement_link == blank %}

{% else %} {% endif %}

{% if section.settings.announcement_icon != 'none' %} {%- assign icon = 'icon-' | append: section.settings.announcement_icon -%} {% include icon %} {% endif %} {{ section.settings.announcement_text | escape }}

{% include 'icon-close' %}

{% if section.settings.announcement_link == blank %}

{% else %} {% endif %}

{% endif %}
{% endif %}

{{ 'general.header.menu' | t }}

{% for link in linklists[section.settings.primary_navigation].links%} {% assign child_list_handle = link.title | handleize %} {% if link.links != blank %}
• {{ link.title }} {{ 'general.navigation.toggle_sublinks' | t: link_title: link.title }} {% include 'icon-arrow-down' %}
  {% for childlink in link.links %}
  • {% if childlink.links != blank %} {{ childlink.title }} {{ 'general.navigation.toggle_sublinks' | t: link_title: childlink.title }} {% include 'icon-arrow-down' %}
    {% for grandchildlink in childlink.links %}
    • {{ grandchildlink.title | escape }}
    {% endfor %}
    {% else %} {{ childlink.title | escape }} {% endif %}
  {% endfor %}
{% else %}
• {{ link.title }}
{% endif %} {% endfor %}

{% if shop.customer_accounts_enabled %} {% if customer %}
• {% if customer.first_name != blank %} {% capture first_name %}{{ customer.first_name }}{% endcapture %} {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} {% else %} {{ 'layout.customer.account' | t }} {% endif %}
• {{ 'layout.customer.log_out' | t }}
{% else %}
• {{ 'layout.customer.log_in' | t }}
• {{ 'layout.customer.create_account' | t }}
{% endif %} {% endif %} {% for link in linklists[section.settings.secondary_navigation].links %}
• {{ link.title }}
{% endfor %}

{% if section.settings.show_social_icons %}

{% include 'social-links', disableTab: true, largeIcons: true %}

{% endif %}

{% include ‘search-bar’, animate: true, disableTab: true %}

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

{% else %}

{% endif %} {%- capture image_size %}x{{ section.settings.logo_max_height }}{% endcapture -%}

{% if section.settings.logo %}

.site-header__logo-image { height: {{ section.settings.logo_max_height | append: 'px' }}; }

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

{% endif %}
{% else %}
{{ shop.name }}
{% endif %}

{% if request.page_type == ‘index’ %}

{% else %}

{% endif %}

{%- assign icon = 'icon-header-' | append: section.settings.icon %} {% include icon %} {{ 'general.header.view_cart' | t }}

[MUCuser]

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

[MUCuser]

{% if section.settings.enable_transparent and request.page_type == 'index' %}
  
{% endif %}

  

  

[MUCuser]

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

[dmwwebartisan]

@MUCuser

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


[MUCuser]

here

[dmwwebartisan]

@MUCuser

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

{% if section.settings.enable_transparent and request.page_type == 'index' %}
  
{% endif %}

  

  

[MUCuser]

Thank you so much sir. It worked.

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

[MUCuser]

or even the icon itself?

[MUCuser]

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

[dmwwebartisan]

@MUCuser

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

Thanks!

[MUCuser]

Password is: test

I now have 3 problems:

1. the Icon is too thick.

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?