'NARRATIVE' theme - I have removed the top Shopping Cart, but now need to re-centre my store logo?

Solved
TeeKay
Explorer
49 1 33

I'm currently building a new look for my store using the free Shopify Narative theme.

 

My store is a single product store and so I essentially do not need the 'shopping cart' function any shape or form.

 

Using CSS I have hidden the 'cart icon' from the top-right of my websites header, however this has quite naturally caused my shop logo (which was central) to shift off to the righthand side a little.

 

The theme is fully responsive and so the logo of course changes size depending on the size of the visitors display.

 

Does anyone know how to centralise my 'shop logo' in this scenario without causing any issues with the responsiveness?

 

Thank you

0 Likes
Eric_K_
Shopify Expert
115 22 48

There's probably a few ways you could do this but I'd just open up the theme code and find where that cart code is.  Just replace everything inside the div with the classes "site-header__section site-header__section--button" with this:

 

<div class="btn--square"></div>
0 Likes
TeeKay
Explorer
49 1 33

Hello Eric thank you very much for weighing in.

 

I tried it just now replacing the code you mentioned within the header.liquid file (for which there were two accounts of the "site-header__section site-header__section--button" code)  but it didn't change anything in respect of my 'store logo' remaining off centre to the right-hand side (i.e. due to myself having purposely hidden my 'cart icon' using CSS), thus my store-logo remained off-centre still.

 

Any suggestions, maybe I didn't do it correctly...

0 Likes
Eric_K_
Shopify Expert
115 22 48

Would you mind posting the contents of your header.liquid file here so I can see what it looks like?

0 Likes
TeeKay
Explorer
49 1 33

Hello Eric,

 

What I've thought about doing instead now, is to simply leave the cart icon as normal however change the cart icon link from the '/cart' to '/mysingleproduct' - I suppose having the cart icon there could actually be wise in a sense as it quickly establishes to a visitor that we are a store and not a site offering solely info.

 

Nevertheless if you can direct me further as regards how to accomplish the original task posted i.e. to remove the cart icon (which I did with simple display-none CSS) yet still have my store header logo be properly centred on all display sizes, then that would be excellent as then I have that option not he table should I decide that having he cart icon is a hindrance.

 

Here is the header code:

{% if section.settings.enable_transparent and template.name == '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 section.settings.enable_transparent and template.name == 'index' %} site-header--transparent{% endif %}{% if template.name == 'index' %} site-header--homepage{% endif %}" data-section-id="{{ section.id }}" data-section-type="header-section" data-drawer-push>
  <header class="site-header__wrapper" role="banner">
    {% if section.settings.show_announcement %}
      {% if section.settings.home_page_only == false or template.name == '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="/account">{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}</a>
                    {% else %}
                      <a href="/account">{{ 'layout.customer.account' | t }}</a>
                    {% endif %}
                  </li>
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="/account/logout">{{ 'layout.customer.log_out' | t }}</a>
                  </li>
                {% else %}
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="/account/login">{{ 'layout.customer.log_in' | t }}</a>
                  </li>
                  <li class="navigation__link navigation__link--secondary navigation__entrance-animation">
                    <a href="/account/register">{{ '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 template.name == '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="/" 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 template.name == '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 template.name == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>
      <div class="site-header__section site-header__section--button">
        <a href="/cart" 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>

  

 

0 Likes
Eric_K_
Shopify Expert
115 22 48

This is an accepted solution.

At the very bottom if you change this part 

      <div class="site-header__section site-header__section--button">
        <a href="/cart" 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>

 

to this, it should work

      <div class="site-header__section site-header__section--button">
        <div class="btn--square"></div>
      </div>
TeeKay
Explorer
49 1 33

Thank you so much for that Eric, you go are far beyond my own skills, solved my query perfectly!

0 Likes
Eric_K_
Shopify Expert
115 22 48

You're welcome. Glad I could help! 

0 Likes
Azrajby
Tourist
6 0 1

Is it possible to replace the cart logo with Login/Sign Up logo in the Narrative Theme?

 

0 Likes