Prestige theme Align left header on mobile

[Danielparsons]

Hi All,

I am trying to align my header left on mobile, thus replacing the hamburger menu to the right hand column and checkout bag. I would also like to create another button in the mobile header with a ‘SELL’ button. And a visible search bar below.

my store URL : https://label-source.co.uk/

See current screenshot below and a screenshot of another website how I am trying to get it to look like.

Thank you,

Daniel

[dmwwebartisan]

@Danielparsons

Please share your sections/header.liquid file code. Because this is a code customization work.

Thanks!

[Danielparsons]

Hi @dmwwebartisan Thank you for getting back to me. i will attach the code below or would you prefer this sent somewhere else?

{%- comment -%}
In Prestige, the header is quite complex due to the very high number of possible combinations. If you have to edit it, please
make sure to duplicate the theme first so you can revert your changes in case any issue is introduced.
{%- endcomment -%}

{%- comment -%}

USEFUL VARIABLES

{%- endcomment -%}

{%- assign use_transparent_header = false -%}

{%- if template == ‘index’ and section.settings.enable_transparent_header -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if template.name == ‘collection’ and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != ‘no-image’ -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if section.settings.navigation_style != ‘sidebar’ -%}
{%- assign use_sidebar_menu = false -%}
{%- else -%}
{%- assign use_sidebar_menu = true -%}
{%- endif -%}

{%- comment -%}

CURRENCY AND LANGUAGE SELECTORS

{%- endcomment -%}

{%- if section.settings.show_country_selector and localization.available_countries.size > 1 -%}
{%- assign country_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{%- if locale_selector or country_selector -%}
{%- capture localization_form -%}
{%- form ‘localization’, id: ‘localization_form_header’, class: ‘Header__LocalizationForm hidden-pocket hidden-lap’ -%}

{%- if country_selector -%}

{{ 'header.general.country' | t }} {{- localization.country.name }} ({{ localization.country.currency.iso_code }} {% if localization.country.currency.symbol %}{{ localization.country.currency.symbol }}{%- endif -%}) {%- render 'icon', icon: 'select-arrow' -%}

{% render 'icon' with 'close' %} {{ 'header.general.country' | t }}

{%- for country in localization.available_countries -%} {{- country.name }} ({{ country.currency.iso_code }} {% if country.currency.symbol %}{{ country.currency.symbol }}{%- endif -%}) {%- endfor -%}

{%- endif -%}

{%- if locale_selector -%}

{{ 'header.general.locale' | t }} {{- localization.language.endonym_name | capitalize -}} {%- render 'icon', icon: 'select-arrow' -%}

{% render 'icon' with 'close' %} {{ 'header.general.locale' | t }}

{%- for language in localization.available_languages -%} {{- language.endonym_name | capitalize -}} {%- endfor -%}

{%- endif -%}

{%- endform -%} {%- endcapture -%} {%- endif -%}

{%- comment -%}

SEARCH FORM (implemented as a modal)

Implementation note: make sure that the Search div is always just before the Header element, as the CSS uses
this assumption

{%- endcomment -%}

{%- render 'icon' with 'search' -%} {%- render 'icon' with 'search-desktop' -%}

{% render ‘icon’ with ‘close’ %}

{%- if settings.search_mode != 'product' -%}

{%- endif -%}

{%- comment -%}

HEADER CONTENT

{%- endcomment -%}

{%- capture section_settings -%}
{
“navigationStyle”: {{ section.settings.navigation_style | json }},
“hasTransparentHeader”: {% if use_transparent_header %}true{% else %}false{% endif %},
“isSticky”: {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- render 'icon' with 'nav' -%} {%- render 'icon' with 'nav-desktop' -%}

{%- comment -%}

DESKTOP NAVIGATION (if not using the sidebar mode)

{%- endcomment -%}

{%- unless use_sidebar_menu -%}
{%- assign main_menu_handle = section.settings.navigation_menu | default: ‘main-menu’ -%}
{%- assign main_menu = linklists[main_menu_handle] -%}

{%- assign mega_menu_names = ‘’ -%}

{%- for block in section.blocks -%}
{%- if block.type == ‘mega_menu’ -%}
{%- assign trim_mega_menu_name = block.settings.navigation_mega_menu | strip -%}
{%- assign mega_menu_names = mega_menu_names | append: trim_mega_menu_name | append: ‘,’ -%}
{%- endif -%}
{%- endfor -%}

{%- assign mega_menu_names = mega_menu_names | downcase | split: ‘,’ | compact -%}

{%- for link in main_menu.links -%} {%- assign downcased_link_title = link.title | downcase | strip -%} {%- assign use_mega_menu = false -%}

{%- capture menu_item_dropdown -%}
{%- if mega_menu_names contains downcased_link_title -%}
{%- for block in section.blocks -%}
{%- assign downcased_mega_menu_name = block.settings.navigation_mega_menu | downcase -%}

{%- if downcased_mega_menu_name != downcased_link_title -%}
{%- continue -%}
{%- endif -%}

{%- assign use_mega_menu = true -%}
{%- assign push_image_count = 0 -%}

{%- if block.settings.push_1_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- if block.settings.push_2_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- assign should_space_evenly = false -%}

{%- if push_image_count == 0 and link.links.size <= 3 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 1 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 2 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- for sub_link in link.links -%}
{{ sub_link.title | title }}
{%- if sub_link.links != blank -%}
{%- for sub_sub_link in sub_link.links -%}
• {{ sub_sub_link.title | escape }}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- if push_image_count > 0 -%}
{%- if block.settings.push_1_image -%}
{%- if block.settings.push_1_url != blank -%} {%- endif -%}
{%- assign max_width = 370 | at_most: block.settings.push_1_image.width -%}
{%- if block.settings.push_1_heading != blank -%}
{{ block.settings.push_1_heading | escape }}
{%- endif -%}
{%- if block.settings.push_1_subheading != blank -%}
{{ block.settings.push_1_subheading | escape }}
{%- endif -%}
{%- if block.settings.push_1_url != blank -%}

{%- endif -%}
{%- endif -%}
{%- if block.settings.push_2_image -%}
{%- if block.settings.push_2_url != blank -%} {%- endif -%}
{%- assign max_width = 370 | at_most: block.settings.push_2_image.width -%}
{%- if block.settings.push_2_heading != blank -%}
{{ block.settings.push_2_heading | escape }}
{%- endif -%}
{%- if block.settings.push_2_subheading != blank -%}
{{ block.settings.push_2_subheading | escape }}
{%- endif -%}
{%- if block.settings.push_2_url != blank -%}

{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%} {%- elsif link.links != blank -%}
{%- for sub_link in link.links -%}
• {{ sub_link.title | escape }} {% if sub_link.links != blank %}{% render 'icon' with 'select-arrow-right' %}{% endif %}

  {%- if sub_link.links != blank -%}

  {%- for sub_sub_link in sub_link.links -%}
  • {{ sub_sub_link.title | escape }}
  {%- endfor -%}
  {%- endif -%}
{%- endfor -%}
{%- endif -%} {%- endcapture -%}
• {{- link.title | escape -}}

  {%- if use_mega_menu or menu_item_dropdown == blank -%}
  {{ link.title | escape }}
  {%- endif -%}
  

  {{- menu_item_dropdown -}}

{%- endfor -%}

{{- localization_form -}}
{%- endunless -%}

{%- capture header_logo -%}

{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}

{%- if use_transparent_header and section.settings.transparent_logo != blank -%}

{%- endif -%}
{%- else -%}
{{ shop.name }}
{%- endif -%}

{%- endcapture -%}

{%- if template == 'index' -%}

{{ header_logo }}

{%- else -%}

{{ header_logo }}

{%- endif -%}

{%- unless section.settings.show_icons or use_sidebar_menu -%}

{%- if localization_form != blank and section.settings.navigation_style == 'inline' or section.settings.navigation_style == 'logoLeft' -%}
• {{ localization_form }}
{%- endif -%}

{%- if shop.customer_accounts_enabled -%}

• {{- 'header.navigation.account' | t -}}
{%- endif -%}
• {{ 'header.navigation.search' | t }}
• {{ 'header.navigation.cart' | t }} ({{ cart.item_count }})

{%- elsif localization_form != blank -%}

• {{ localization_form }}

{%- endunless -%}

{%- if shop.customer_accounts_enabled and section.settings.show_icons or use_sidebar_menu -%}

{%- render ‘icon’ with ‘account’ -%}

{%- endif -%}

{%- render 'icon' with 'search' -%} {%- render 'icon' with 'search-desktop' -%}

<a href=“{{ routes.cart_url }}” class=“Header__Icon Icon-Wrapper Icon-Wrapper–clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}” {% if settings.cart_type == ‘drawer’ %}data-action=“open-drawer” data-drawer-id=“sidebar-cart” aria-expanded=“false” aria-label=“{{ ‘header.navigation.open_cart’ | t }}”{% endif %}>
{%- render ‘icon’ with ‘cart’ -%}
{%- render ‘icon’ with ‘cart-desktop’ -%}

{%- if section.settings.use_sticky_header -%} :root { --use-sticky-header: 1; --use-unsticky-header: 0; } .shopify-section--header { position: -webkit-sticky; position: sticky; } {%- else -%} :root { --use-sticky-header: 0; --use-unsticky-header: 1; } {%- endif -%} {%- if section.settings.logo -%} .Header__LogoImage { max-width: {{ section.settings.logo_max_width }}px; } @media screen and (max-width: 640px) { .Header__LogoImage { max-width: {{ section.settings.mobile_logo_max_width }}px; } } {%- endif -%} {%- if use_transparent_header -%} :root { --header-is-not-transparent: 0; --header-is-transparent: 1; } .shopify-section--header { margin-bottom: calc(-1 * var(--header-height)); } .supports-sticky .Search[aria-hidden="true"] + .Header--transparent { {%- if section.settings.show_transparent_header_border -%} box-shadow: 0 -1px {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.25 }} inset; {%- else -%} box-shadow: none; {%- endif -%} color: {{ section.settings.transparent_text_color }}; } {%- else -%} :root { --header-is-not-transparent: 1; --header-is-transparent: 0; } {%- endif -%}

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section–header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “use_sticky_header”,
“label”: “Use sticky header”,
“default”: true
},
{
“type”: “header”,
“content”: “Logo”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Image”,
“info”: “200 x 60px .png recommended”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 50,
“max”: 350,
“step”: 5,
“unit”: “px”,
“label”: “Image width”,
“default”: 140
},
{
“type”: “range”,
“id”: “mobile_logo_max_width”,
“min”: 50,
“max”: 200,
“step”: 5,
“unit”: “px”,
“label”: “Mobile image width”,
“default”: 90
},
{
“type”: “header”,
“content”: “Country/region selector”,
“info”: “To add a country/region, go to your currency settings.”
},
{
“type”: “checkbox”,
“id”: “show_country_selector”,
“label”: “Show country/region selector”,
“default”: false
},
{
“type”: “header”,
“content”: “Language selector”,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Show language selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “navigation_menu”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “select”,
“id”: “navigation_style”,
“label”: “Navigation style”,
“info”: “Setting will default to center style if screen width cannot fit all the links.”,
“options”: [
{
“value”: “sidebar”,
“label”: “Sidebar”
},
{
“value”: “inline”,
“label”: “Inline”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “logoLeft”,
“label”: “Logo left”
}
],
“default”: “inline”
},
{
“type”: “checkbox”,
“id”: “show_icons”,
“label”: “Show icons”,
“info”: “Text for account, search and cart are replaced by icons on desktop.”,
“default”: false
},
{
“type”: “header”,
“content”: “Transparent header”
},
{
“type”: “checkbox”,
“id”: “enable_transparent_header”,
“label”: “Enable on homepage”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_transparent_header_collection”,
“label”: “Enable on collection pages”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_transparent_header_border”,
“label”: “Show separation border”,
“default”: true
},
{
“type”: “color”,
“id”: “transparent_text_color”,
“label”: “Text/icon color”,
“default”: “#ffffff”
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “Logo image”,
“info”: “200 x 60px .png recommended”
}
],
“blocks”: [
{
“type”: “mega_menu”,
“name”: “Mega menu”,
“settings”: [
{
“type”: “text”,
“id”: “navigation_mega_menu”,
“label”: “Menu item”,
“info”: “Enter menu item to apply a mega menu dropdown. Learn more.”
},
{
“type”: “header”,
“content”: “Image push 1”
},
{
“type”: “image_picker”,
“id”: “push_1_image”,
“label”: “Image”,
“info”: “740 x 460 px .jpg recommended”
},
{
“type”: “text”,
“id”: “push_1_heading”,
“label”: “Heading”,
“default”: “Example heading”
},
{
“type”: “text”,
“id”: “push_1_subheading”,
“label”: “Sub-heading”,
“default”: “Example sub-heading”
},
{
“type”: “url”,
“id”: “push_1_url”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Image push 2”
},
{
“type”: “image_picker”,
“id”: “push_2_image”,
“label”: “Image”,
“info”: “740 x 460 px .jpg recommended”
},
{
“type”: “text”,
“id”: “push_2_heading”,
“label”: “Heading”,
“default”: “Example heading”
},
{
“type”: “text”,
“id”: “push_2_subheading”,
“label”: “Sub-heading”,
“default”: “Example sub-heading”
},
{
“type”: “url”,
“id”: “push_2_url”,
“label”: “Link”
}
]
}
]
}
{% endschema %}