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.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
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
Yes. I want to put Logo exactly center and menu to left for mobiles and iPads.
can you please check your theme setting maybe allow if not so it can be done some custom code
Yes I checked but unfortunately not allow. I have to fix from edit code.
oh sorry for this yes its possible to customization code if you need this please sent email and pm details
Okey I sent you pm
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:
-
Step 1: Go to Online store > Themes > Actions > Edit code.
-
Step 2: Go to Sections > header.liquid and change code from line 58 → line 151. https://i.imgur.com/jO2EP4h.png => https://i.imgur.com/SEpohPe.png
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 %}
{% 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!