Center Logo and Menu left on the header for Debut Theme

Hello everyone,
I’m new in Shopify I try to create a store but I have a some questions. I want to use Debut theme but I want to move menu to left side and logo to center on header. I tried every way.

1 Like

@Cochi

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

hi @Cochi

please share your url link.

thank you so much.

Thank you for answer. I want to fix this from “edit code” but I’m really new about that.

My URL

Pasword: hetrig

Thank you for answer. I want to fix this from “edit code” but I’m really new about that.

My URL

Pasword: hetrig

@Cochi

do you have like this?

Yes. I want to put Logo exactly center and menu to left for mobiles and iPads.

1 Like

@Cochi

can you please check your theme setting maybe allow if not so it can be done some custom code

1 Like

Yes I checked but unfortunately not allow. I have to fix from edit code.

1 Like

@Cochi

oh sorry for this yes its possible to customization code if you need this please sent email and pm details

1 Like

Okey I sent you pm

1 Like

@Cochi

great thanks for update i will check and let you know

hi @khilan ı share my URL can you help me ?

Hi @Cochi ,

Hope you are doing well.

Please follow the steps:

Code here: https://pastebin.com/yRN2LzLV

Hope it clear to you.

Hi ! @LitExtension

Thank you for your help but I think code link dosent work. I coudnt open the page.

Hi @Cochi

Here is code

Go to Sections > header.liquid and change code from line 58 → line 151.

Hope that will be helpful


      {% 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-fifth logo-align--center' -%}
      {% endif %}
      
      {% if section.settings.align_logo == 'left' %}
        
      {% endif %}

      
        {% 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 %}
          {% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              
              
            
          {% else %}
            {{ shop.name }}
          {% endif %}
        {% if request.page_type == 'index' %}
          

        {% else %}
          

        {% endif %}
      

      
        

          

          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              
                {% include 'icon-login' %}
                {{ 'layout.customer.account' | t }}
              
            {% else %}
              
                {% include 'icon-login' %}
                {{ 'layout.customer.log_in' | t }}
              
            {% endif %}
          {% endif %}

          
            {% include 'icon-cart' %}
            {{ 'layout.cart.title' | t }}
            

              {{ cart.item_count }}
              {{ 'layout.cart.items_count' | t: count: cart.item_count }}
            

          

          {% unless linklists[section.settings.main_linklist] == blank %}
            
          {% endunless %}
        

      

    

Hi @chintanjoshi Thank you for your answer I tried that code but doesn’t work. I want menu left and logo center. This is really difficult for me because I’m really new about that.

Hi @Cochi You want only for mobile version or also for desktop version.

and you want to show something like this? if yes then for that need customization in code if you need this please sent email and pm details

I want for all version. Yes that picture exactly what I want.

Hi @Cochi ,

Sorry for my late reply, you can try this code:

{% 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-fifth logo-align–center’ -%}

{% endif %}

{% if section.settings.align_logo == ‘left’ %}

{% include ‘site-nav’, linklist: section.settings.main_linklist, wrapper_class: ‘text-left’ %}

{% endif %}

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

{% if section.settings.logo %}

{%- assign img_url = section.settings.logo | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

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

{% 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;”>

{% else %}

{{ shop.name }}

{% endif %}

{% if request.page_type == ‘index’ %}

{% else %}

{% endif %}

{% include ‘icon-search’ %}

{{ ‘layout.navigation.search’ | t }}

{% if shop.customer_accounts_enabled %}

{% if customer %}

{% include ‘icon-login’ %}

{{ ‘layout.customer.account’ | t }}

{% else %}

{% include ‘icon-login’ %}

{{ ‘layout.customer.log_in’ | t }}

{% endif %}

{% endif %}

{% include ‘icon-cart’ %}

{{ ‘layout.cart.title’ | t }}

{{ cart.item_count }}

{{ ‘layout.cart.items_count’ | t: count: cart.item_count }}

{% unless linklists[section.settings.main_linklist] == blank %}

{% include ‘icon-hamburger’ %}

{% include ‘icon-close’ %}

{% endunless %}

Hope this helps!