Center logo, menu left in the header - Debut theme

Solved
Highlighted
Tourist
10 0 0

Hello,

I am trying to move the logo to the center and menu to the left in the header on the debut theme. I have floated the menu to the left but cannot move the logo to the center.

 

Searching the forums and google, I have only found simular questions for other themes and I cannot make these work.

 

Can anyone point me in the right direction?

 

Thank you,

 

James

0 Likes
Highlighted
Trailblazer
130 16 28

In Debut theme you can select the two header layout from admin in 'Header section'.

Go to admin panel in 

Click on Online Store then

Click on Customize on right side

And select the header layout in Section -> Header

If any issues please share your shop url?


Thanks.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
1 Like
Highlighted
Tourist
10 0 0

Thanks for the quick response.

 

Unfortunately the customisation tools wont let me do this.

 

This is what I am trying to achieve...

https://community.shopify.com/c/Shopify-Design/Debut-Centre-logo-and-shift-menu-to-the-left-in-heade...

 

There is no code or solution in the thread.

0 Likes
Highlighted
Tourist
10 0 0

Here is the code in my header.liquid

 

{% if section.settings.message %}
  <style>
    {% if section.settings.logo != blank %}
      .site-header__logo-image {
        max-width: {{ section.settings.logo_max_width | escape }}px;
      }
    {% endif %}

    {% if section.settings.align_logo == 'left' %}
      .site-header__logo-image {
        margin: 0;
      }
    {% endif %}
  </style>
{% endif %}

<div data-section-id="{{ section.id }}" data-section-type="header-section">
  {% if section.settings.message %}
    {% if section.settings.home_page_only == false or template.name == 'index' %}
      <style>
        .announcement-bar {
          background-color: {{ section.settings.color_bg }};
        }

        .announcement-bar--link:hover {
          {% assign brightness = section.settings.color_bg | color_brightness %}

          {% if brightness <= 192 %}
            {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
            background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
          {% else %}
            {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
            background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
          {% endif %}
        }

        .announcement-bar__message {
          color: {{ section.settings.color_text }};
        }
      </style>

      {% if section.settings.message_link == blank %}
        <div class="announcement-bar">
      {% else %}
        <a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
      {% endif %}

        <p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

      {% if section.settings.message_link == blank %}
        </div>
      {% else %}
        </a>
      {% endif %}

    {% endif %}
  {% endif %}

  <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' %}
        <div class="grid__item small--hide medium-up--one-third">
          <div class="site-header__search">
            {% include 'search-form' %}
          </div>
        </div>
      {% endif %}

      {% if section.settings.align_logo == 'center' %}
        {%- assign logo_classes = 'medium-up--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 template.name == '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="/" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% 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="/">{{ shop.name }}</a>
          {% endif %}
        {% if template.name == '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' %}
        </nav>
      {% endif %}

      <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
        <div class="site-header__icons-wrapper">
          {% if section.settings.align_logo == 'left' %}
            <div class="site-header__search site-header__icon small--hide">
              {% include 'search-form' %}
            </div>
          {% endif %}

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

          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <a href="/account" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
              </a>
            {% else %}
              <a href="/account/login" 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="/cart" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            {% if cart.item_count > 0 %}
              <div id="CartCount" class="site-header__cart-count">
                <span>{{ cart.item_count }}</span>
                <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
              </div>
            {% endif %}
          </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="navigation"  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" 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" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
                {{ link.title }}
                <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"{% if link.active %} aria-current="page"{% endif %}>
                      {{ link.title }}
                    </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">
                        {{ childlink.title }}
                        <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.active %} aria-current="page"{% endif %}>
                              {{ childlink.title }}
                            </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.active %} aria-current="page"{% endif %}>
                              {{ grandchildlink.title | escape }}
                            </a>
                          </li>
                        {% endfor %}
                      </ul>
                    {% else %}
                      <a href="{{ childlink.url }}" class="mobile-nav__sublist-link"{% if childlink.active %} aria-current="page"{% endif %}>
                        {{ childlink.title | escape }}
                      </a>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% else %}
              <a href="{{ link.url }}" class="mobile-nav__link"{% if link.active %} aria-current="page"{% endif %}>
                {{ link.title }}
              </a>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </nav>
  </header>

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

{% schema %}
  {
    "name": {
      "en": "Header",
      "de": "Titel",
      "fr": "En-tête"
    },
    "settings": [
      {
        "type": "radio",
        "id": "align_logo",
        "label": {
          "en": "Logo alignment",
          "de": "Logo-Ausrichtung",
          "fr": "Alignement du logo"
        },
        "default": "left",
        "options": [
          {"value": "left", "label": { "en": "Left", "de": "Links", "fr": "Gauche" }},
          {"value": "center", "label": { "en": "Centered", "de": "Mittig", "fr": "Centré" }}
        ]
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": {
          "en": "Logo image",
          "de": "Logo-Foto",
          "fr": "Image du logo"
        }
      },
      {
        "type": "range",
        "id": "logo_max_width",
        "label": {
          "en": "Custom logo width",
          "de": "Logobreite",
          "fr": "Largeur personnalisée du logo"
        },
        "min": 50,
        "max": 550,
        "step": 5,
        "unit": "px",
        "default": 100
      },
      {
        "type": "link_list",
        "id": "main_linklist",
        "label": {
          "en": "Menu",
          "de": "Menü",
          "fr": "Menu"
        },
        "default": "main-menu"
      },
      {
        "type": "header",
        "content": {
          "en": "Announcement bar",
          "de": "Ankündigungsbereich",
          "fr": "Barre d'annonces"
        }
      },
      {
        "type": "checkbox",
        "id": "message",
        "label": {
          "en": "Show announcement",
          "de": "Ankündigung anzeigen",
          "fr": "Afficher l'annonce"
        },
        "default": false
      },
      {
        "type": "checkbox",
        "id": "home_page_only",
        "label": {
          "en": "Home page only",
          "de": "Nur Startseite",
          "fr": "Page d'accueil uniquement"
        },
        "default": true
      },
      {
        "type": "text",
        "id": "message_text",
        "label": {
          "en": "Text",
          "de": "Text",
          "fr": "Texte"
        },
        "default": {
          "en": "Announce something here",
          "de": "Hier etwas ankündigen",
          "fr": "Annoncez quelque chose ici"
        }
      },
      {
        "type": "url",
        "id": "message_link",
        "label": {
          "en": "Link",
          "de": "Link",
          "fr": "Lien"
        },
        "info": {
          "en": "Optional",
          "de": "Optional",
          "fr": "Facultatif"
        }
      },
      {
        "type": "color",
        "id": "color_bg",
        "label": {
          "en": "Bar",
          "de": "Zeile",
          "fr": "Barre"
        },
        "default": "#7796a8"
      },
      {
        "type": "color",
        "id": "color_text",
        "label": {
          "en": "Text",
          "de": "Text",
          "fr": "Texte"
        },
        "default": "#fff"
      }
    ]
  }
{% endschema %}

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "{{ shop.name }}",
  {% if section.settings.logo %}
    {% assign image_size = section.settings.logo.width | append:'x' %}
    "logo": "https:{{ section.settings.logo | img_url: image_size }}",
  {% endif %}
  "sameAs": [
    "{{ settings.social_twitter_link }}",
    "{{ settings.social_facebook_link }}",
    "{{ settings.social_pinterest_link }}",
    "{{ settings.social_instagram_link }}",
    "{{ settings.social_tumblr_link }}",
    "{{ settings.social_snapchat_link }}",
    "{{ settings.social_youtube_link }}",
    "{{ settings.social_vimeo_link }}"
  ],
  "url": "{{ shop.url }}{{ page.url }}"
}
</script>

{% if template.name == 'index' %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": "{{ shop.name }}",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "{{ shop.url }}/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      },
      "url": "{{ shop.url }}{{ page.url }}"
    }
  </script>
{% endif %}
0 Likes
Highlighted

Success.

Trailblazer
130 16 28

Hi. 

First create backup of your header.liquid file and replace with attachment code.

Thanks.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
1 Like
Highlighted
Tourist
10 0 0

@SWSolutions

Sorry for the late reply. I have just replaced the header.liquid code with the attached code. Doesn't seem to have made any changes to the header.

0 Likes
Highlighted
Trailblazer
130 16 28

Are you selected the 'Center' of logo position from admin panel in header section?

 

Thanks

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
1 Like
Highlighted
Tourist
10 0 0

@SWSolutions

 

Oh sorry I didn't.

 

Thats great, exactly what I was trying to achieve! Thank you for your help!

0 Likes
New Member
2 0 0

Hello! I am trying to do this same process. When I put my logo within the header as a png it's way too small. When I try to increase the size, the whole header increases, as well. I want the header bar to stay the same, but my logo increases in size. I tried to utilize the code you gave to the last individual to fix the issue, but when I save the asset there are errors. What is my next step?

0 Likes
Highlighted
Trailblazer
130 16 28

Can you share your shop URL?

 

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
1 Like