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

Store Design
1

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
JamesKirkby_0-1611941451922.png1575×634 181 KB

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.

2

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 :

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

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

← This one is empty

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:


      

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

              

              {% 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 }}
1 Like
3

This worked great, thanks!