repositioning a menu on shopify debut theme using css / html

Question

I have a website which is is built using shopify which is using the debut theme.

In my header I have positioned my logo in the centre of the page which has pushed my main menu down beneath the logo, and i want to position it on the left of the logo. Whilst aligning with the icons on the right of the logo.

I can post my theme.css code but its quite large.

This is the section of code that i believe i need to target.

<nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
    <ul class="site-nav list--inline site-nav--centered" id="SiteNav">
        <li class="site-nav--active">
            <a href="/" class="site-nav__link site-nav__link--main site-nav__link--active" aria-current="page"><span class="site-nav__label">Home</span></a>
        </li>
        <li>
            <a href="/pages/about" class="site-nav__link site-nav__link--main"><span class="site-nav__label">About</span></a>
        </li>
        <li>
            <a href="/products/remedi-propolis-gin" class="site-nav__link site-nav__link--main"><span class="site-nav__label">Shop</span></a>
        </li>
        <li><a href="/pages/contact" class="site-nav__link site-nav__link--main"><span class="site-nav__label">Contact</span></a>
        </li>
   </ul>
</nav>

The header.liquid file which relates to the header tag is as follows

  <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
<div class="grid grid--no-gutters grid--table site-header__mobile-nav">
  {% if section.settings.align_logo == 'center' %}
    {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
  {% else %}
    {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
  {% endif %}

  <div class="grid__item {{ logo_classes }}">
    {% 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="h2 site-header__logo">
    {% else %}
      <div class="h2 site-header__logo">
    {% endif %}
      {% if section.settings.logo %}
        {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}" data-image-loading-animation>
          {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
          <img class="lazyload js"
               src="{{ section.settings.logo | img_url: '300x300' }}"
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
               data-sizes="auto"
               alt="{{ logo_alt | escape }}"
               style="max-width: {{ section.settings.logo_max_width }}px">
          <noscript>
            {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
            <img 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 }}"
                 style="max-width: {{ section.settings.logo_max_width }}px;">
          </noscript>
        </a>
      {% else %}
        <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
      {% endif %}
    {% if request.page_type == 'index' %}
      </h1>
    {% else %}
      </div>
    {% endif %}
  </div>

  {% if section.settings.align_logo == 'left' %}
    <nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
      {% include 'site-nav', linklist: section.settings.main_linklist %}
    </nav>
  {% endif %}

  <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
    <div class="site-header__icons-wrapper">

      <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
        {% include 'icon-search' %}
        <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
      </button>

      {% if shop.customer_accounts_enabled %}
        {% if customer %}
          <a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
            {% include 'icon-login' %}
            <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
          </a>
        {% else %}
          <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
            {% include 'icon-login' %}
            <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
          </a>
        {% endif %}
      {% endif %}

      <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
        {% include 'icon-cart' %}
        <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
        <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
          <span data-cart-count>{{ cart.item_count }}</span>
          <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
        </div>
      </a>

      {% unless linklists[section.settings.main_linklist] == blank %}
        <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav"  aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
          {% include 'icon-hamburger' %}
          {% include 'icon-close' %}
        </button>
      {% endunless %}
    </div>

  </div>
</div>

<nav class="mobile-nav-wrapper medium-up--hide critical-hidden" role="navigation">
  <ul id="MobileNav" class="mobile-nav">
    {% for link in linklists[section.settings.main_linklist].links %}
      {%- assign outerLoopIndex = forloop.index -%}

      <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
        {% if link.links != blank %}
          {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
          <button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
            <span class="mobile-nav__label">{{ link.title | escape }}</span>
            <div class="mobile-nav__icon">
              {% include 'icon-chevron-right' %}
            </div>
          </button>
          <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
            <li class="visually-hidden" tabindex="-1" data-menu-title="2">
              {{- link.title }} {{ 'layout.navigation.menu' | t -}}
            </li>
            <li class="mobile-nav__item border-bottom">
              <div class="mobile-nav__table">
                <div class="mobile-nav__table-cell mobile-nav__return">
                  <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
                    {% include 'icon-chevron-left' %}
                  </button>
                </div>
                <span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent">
                  <span class="mobile-nav__label">{{ link.title | escape }}</span>
                </span>
              </div>
            </li>

            {% for childlink in link.links %}
              <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                {% if childlink.links != blank %}
                  {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
                  <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
                    <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                    <div class="mobile-nav__icon">
                      {% include 'icon-chevron-right' %}
                    </div>
                  </button>
                  <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
                    <li class="visually-hidden" tabindex="-1" data-menu-title="3">
                      {{- childlink.title }} {{ 'layout.navigation.menu' | t -}}
                    </li>
                    <li class="mobile-nav__item border-bottom">
                      <div class="mobile-nav__table">
                        <div class="mobile-nav__table-cell mobile-nav__return">
                          <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
                            {% include 'icon-chevron-left' %}
                          </button>
                        </div>
                        <a href="{{ childlink.url }}"
                          class="mobile-nav__sublist-link mobile-nav__sublist-header"
                          {% if childlink.current %} aria-current="page"{% endif %}
                        >
                          <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                        </a>
                      </div>
                    </li>
                    {% for grandchildlink in childlink.links %}
                      <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                        <a href="{{ grandchildlink.url }}"
                          class="mobile-nav__sublist-link"
                          {% if grandchildlink.current %} aria-current="page"{% endif %}
                        >
                          <span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span>
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                {% else %}
                  <a href="{{ childlink.url }}"
                    class="mobile-nav__sublist-link"
                    {% if childlink.current %} aria-current="page"{% endif %}
                  >
                    <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                  </a>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <a href="{{ link.url }}"
            class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}"
            {% if link.current %} aria-current="page"{% endif %}
          >
            <span class="mobile-nav__label">{{ link.title | escape }}</span>
          </a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>

and underneath this is this section which states if the logo is centered do this

{% if section.settings.align_logo == 'center' %}
<nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
{% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
 </nav>
 {% endif %}
 </div>

but i'm not sure what css to add. Can anyone please help me achieve this?

Many Thanks Luke