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.
