Hi
Thanks for confirming the order.
For the menu alignment issue on desktop, please replace the contents of this file sections/navbar.liquid with the code below.
<style>
#navbar-desktop .navbar-logo {
justify-content: left !important;
}
#navbar-desktop .nav {
justify-content: center;
}
</style>
<navbar-wrapper
id="navbar-wrapper"
class="
{{ section.settings.bg_color }}
{{ section.settings.text_color }}
{{ section.settings.border_top_width | prepend: 'border-top-' }}
{{ section.settings.border_bottom_width | prepend: 'border-bottom-' }}
{{ section.settings.border_color }}
{{ section.settings.shadow }}
"
style="
--bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
--bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
">
{% for block in section.blocks %}
{% if block.type == 'mobile' %}
<nav
id="navbar-mobile"
class="navbar d-desktop-none {{ block.settings.pt | prepend: 'pt-' }} {{ block.settings.pb | prepend: 'pb-' }}"
{{ block.shopify_attributes }}>
<div class="container d-block">
<div class="row align-items-center">
<div class="col-6">
<div class="nav flex-nowrap">
<a
class="nav-link icon-circle-link ms-n2"
href="#offcanvas-menu"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-menu"
role="button"
aria-label="{{ 'general.accessibility.menu' | t }}">
{% render 'svg-icons', icon: 'menu', size: 20 %}
</a>
<a
class="nav-link icon-circle-link"
href="#offcanvas-search"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-search"
role="button"
aria-label="{{ 'general.accessibility.search' | t }}">
{% render 'svg-icons', icon: 'search', size: 20 %}
</a>
</div>
</div>
<div class="col-6 text-center">
{% render 'navbar-logo', block: block %}
</div>
<div class="col-6">
<div class="nav justify-content-end flex-nowrap">
{% if settings.wishlist %}
<a
class="nav-link icon-circle-link"
href="#offcanvas-wishlist"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-wishlist"
aria-label="{{ 'general.accessibility.wishlist' | t }}"
role="button">
{% render 'svg-icons', icon: 'heart', size: 20 %}
<span class="wishlist-count-badge badge badge-circle"></span>
</a>
{% endif %}
<a
class="nav-link icon-circle-link me-n2"
href="#offcanvas-cart"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-cart"
aria-label="{{ 'general.accessibility.cart' | t }} {{ cart.item_count }}"
role="button">
{% render 'svg-icons', icon: 'cart', size: 20 %}
{% render 'cart-count-badge' %}
</a>
</div>
</div>
</div>
</div>
</nav>
{% else %}
<nav
id="navbar-desktop"
class="navbar d-none d-desktop-block {{ block.settings.pt | prepend: 'pt-' }} {{ block.settings.pb | prepend: 'pb-' }}"
{{ block.shopify_attributes }}>
<div class="container d-block">
<div
class="row align-items-center flex-grow-1">
<div class="col-4">
{% render 'navbar-logo', block: block %}
</div>
<div class="col-10">
{% render 'navbar-desktop-menu', block: block %}
</div>
<div class="col-4">
<ul class="nav justify-content-end">
{% if localization.available_countries.size > 1 or localization.available_languages.size > 1 %}
<li class="nav-item">
<a
class="nav-link icon-circle-link d-inline-flex align-items-center"
href="#modal-localization"
data-bs-toggle="modal"
aria-controls="modal-localization"
role="button">
{% render 'svg-icons', icon: 'globe', size: 20, stroke_width: 1.5, class: 'me-3' %}
<span class="visually-hidden">
{{ 'general.accessibility.localization' | t }}
</span>
<span class="fs-sm">
{{ localization.country.iso_code }}
</span>
</a>
</li>
{% endif %}
{% if shop.customer_accounts_enabled %}
<li class="nav-item">
<a
class="nav-link icon-circle-link {% if template.name == 'login' or template.name == 'account' %}active{% endif %}"
aria-current="{% if template.name == 'login' or template.name == 'account' %}page{% endif %}"
href="{{ routes.account_url }}"
aria-label="{{ 'general.accessibility.account' | t }}">
{% render 'svg-icons', icon: 'account', size: 20 %}
</a>
</li>
{% endif %}
<li class="nav-item">
<a
class="nav-link icon-circle-link"
href="#offcanvas-search"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-search"
aria-label="{{ 'general.accessibility.search' | t }}"
role="button">
{% render 'svg-icons', icon: 'search', size: 20 %}
</a>
</li>
{% if settings.wishlist %}
<li class="nav-item">
<a
class="nav-link icon-circle-link"
href="#offcanvas-wishlist"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-wishlist"
aria-label="{{ 'general.accessibility.wishlist' | t }}"
role="button">
{% render 'svg-icons', icon: 'heart', size: 20 %}
<span class="wishlist-count-badge badge badge-circle"></span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a
class="nav-link icon-circle-link"
href="#offcanvas-cart"
data-bs-toggle="offcanvas"
aria-controls="offcanvas-cart"
aria-label="{{ 'general.accessibility.cart' | t }} {{ cart.item_count }}"
role="button">
{% render 'svg-icons', icon: 'cart', size: 20 %}
{% render 'cart-count-badge' %}
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
{% endif %}
{% endfor %}
</navbar-wrapper>
{% for block in section.blocks %}
{% if block.type == 'mobile' %}
{% render 'navbar-offcanvas-menu', block: block %}
{% endif %}
{% endfor %}
{% schema %}
{
"name": "Navbar",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Styling"
},
{
"type": "select",
"id": "bg_color",
"label": "Background color",
"default": "bg-dark",
"options": [
{ "value": "bg-primary", "label": "Prim." },
{ "value": "bg-secondary", "label": "Sec." },
{ "value": "bg-dark", "label": "Dark" },
{ "value": "bg-light", "label": "Light" },
{ "value": "bg-white", "label": "White" }
]
},
{
"type": "range",
"id": "bg_opacity",
"label": "Background opacity",
"min": 0,
"max": 100,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "text-light",
"options": [
{ "value": "text-primary", "label": "Prim." },
{ "value": "text-secondary", "label": "Sec." },
{ "value": "text-dark", "label": "Dark" },
{ "value": "text-light", "label": "Light" },
{ "value": "text-white", "label": "White" },
]
},
{
"type": "range",
"id": "border_top_width",
"label": "Border top width",
"default": 0,
"min": 0,
"max": 16,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "border_bottom_width",
"label": "Border bottom width",
"default": 0,
"min": 0,
"max": 16,
"step": 1,
"unit": "px"
},
{
"type": "select",
"id": "border_color",
"label": "Border color",
"default": "border-dark",
"options": [
{ "value": "border-primary", "label": "Prim." },
{ "value": "border-secondary", "label": "Sec." },
{ "value": "border-dark", "label": "Dark" },
{ "value": "border-light", "label": "Light" },
{ "value": "border-white", "label": "White" }
]
},
{
"type": "range",
"id": "border_opacity",
"label": "Border opacity",
"min": 0,
"max": 100,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "select",
"id": "shadow",
"label": "Shadow",
"options": [
{ "value": "", "label": "None" },
{ "value": "shadow-sm", "label": "sm" },
{ "value": "shadow-md", "label": "md" },
{ "value": "shadow-lg", "label": "lg" },
],
"default": "shadow-sm"
}
],
"blocks": [
{
"type": "mobile",
"name": "Mobile",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "range",
"id": "logo_height",
"label": "Logo height",
"min": 10,
"max": 100,
"step": 2,
"default": 40
},
{
"type": "header",
"content": "Collections menu"
},
{
"type": "link_list",
"id": "collections_menu",
"label": "Collections Menu"
},
{
"type": "select",
"id": "collections_menu_img_ratio",
"label": "Collections menu - Image ratio",
"default": "ratio-1x1",
"options": [
{ "group": "Adapt", "value": "adapt", "label": "Adapt" },
{ "group": "Square", "value": "ratio-1x1", "label": "1x1" },
{ "group": "Horizontal", "value": "ratio-4x3", "label": "4x3" },
{ "group": "Horizontal", "value": "ratio-16x9", "label": "16x9" },
{ "group": "Horizontal", "value": "ratio-21x9", "label": "21x9" },
{ "group": "Vertical", "value": "ratio-3x4", "label": "3x4" },
{ "group": "Vertical", "value": "ratio-9x16", "label": "9x16" },
{ "group": "Vertical", "value": "ratio-9x21", "label": "9x21" }
]
},
{
"type": "header",
"content": "Menu"
},
{
"type": "link_list",
"id": "main_menu",
"label": "Main menu",
"default": "main-menu"
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "pt",
"label": "Top",
"min": 0,
"max": 20,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "pb",
"label": "Bottom",
"min": 0,
"max": 20,
"step": 1,
"default": 3
}
]
},
{
"type": "desktop",
"name": "Desktop",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "range",
"id": "logo_height",
"label": "Logo height",
"min": 10,
"max": 100,
"step": 2,
"default": 40
},
{
"type": "header",
"content": "Menu"
},
{
"type": "link_list",
"id": "main_menu",
"label": "Main menu",
"default": "main-menu"
},
{
"type": "select",
"id": "main_menu_img_ratio",
"label": "Image ratio",
"default": "ratio-4x3",
"options": [
{ "group": "Adapt", "value": "adapt", "label": "Adapt" },
{ "group": "Square", "value": "ratio-1x1", "label": "1x1" },
{ "group": "Horizontal", "value": "ratio-4x3", "label": "4x3" },
{ "group": "Horizontal", "value": "ratio-16x9", "label": "16x9" },
{ "group": "Horizontal", "value": "ratio-21x9", "label": "21x9" },
{ "group": "Vertical", "value": "ratio-3x4", "label": "3x4" },
{ "group": "Vertical", "value": "ratio-9x16", "label": "9x16" },
{ "group": "Vertical", "value": "ratio-9x21", "label": "9x21" }
]
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "pt",
"label": "Top",
"min": 0,
"max": 10,
"step": 1,
"default": 4
},
{
"type": "range",
"id": "pb",
"label": "Bottom",
"min": 0,
"max": 10,
"step": 1,
"default": 4
}
]
}
],
"enabled_on": {
"groups": ["header"]
},
"presets": [
{
"name": "Navbar"
}
]
}
{% endschema %}
