Narrative - Move Logo to the far left, move menu and cart to the far right

Solved
JamesKirkby
New Member
2 0 0

Hello,

I have researched this topic for a while now but I can't find a correct solution anywhere.

 

I'm designing a store based on the narrative theme and I wish to move the site logo all the way to the left of the screen.

Additionally, I wish to move the cart and menu items to the far right.

 

What I have managed so far is switching the positions of the logo and the menu icon and moving the logo to the left of the screen, but I can't get the other icons to move to the far right (see screenshot)

 

JamesKirkby_0-1611941451922.png

 

What I did up to now is I switched the logo div and the menu div in the header.liquid and added the following to theme.scss.liquid:

 

.nav.site-header__section.site-header__section--button {
width: 100%;
float: right;
text-align: right;
}

 

.site-header__section.site-header__section--title {
float: left;
text-align: left;
width: auto;
display: inline-block;
justify-content: left;
}

 

Can anyone assist with this?

Thanks for your time in advance.

 

0 Likes

This is an accepted solution.

Hi James,

Here is a solution that doesn't use css. Instead, I just rearrange the div's, add a new div in the first position and move the logo HTML into the first div. 

Step 1. Open up the header.liquid file. The out-of-the box structure included 3 sibling elements under the <header>:

<nav class="site-header__section site-header__section--button"> 

<div class="site-header__section site-header__section--title"> 

<div class="site-header__section site-header__section--button"> 

Step 2. Change the order by moving the <nav> element to the 2nd position

<div class="site-header__section site-header__section--title"> 

<nav class="site-header__section site-header__section--button"> 

<div class="site-header__section site-header__section--button"> 

Step 3. Create a new empty div with the proper css classes (site-header__section site-header__section--button) in the first position

<div class="site-header__section site-header__section--button"> <-- This one is empty

<div class="site-header__section site-header__section--title"> 

<nav class="site-header__section site-header__section--button"> 

<div class="site-header__section site-header__section--button"> 

Step 4. Move the content of the 2nd div (with class site-header__section site-header__section--title) including the logo image tag and int the new first div. The second div will remain empty.

Here's the final result:

    <div class="site-header-sections page-width">
      <div class="site-header__section site-header__section--button">
        {% 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--title">

      </div>
      <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--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>
      </div>
    </div>

 

 

 

 

If my response was helpful please Like and Mark As Solution.
JamesKirkby
New Member
2 0 0

This worked great, thanks!

0 Likes