brioni header

[nikolandos-cpu]

Describe the feature or problem you'd like to solve

No response

Proposed solution

To make the background expand "behind" the logo, text, and icons, the black bar must be a separate layer or a container that sits lower in the z-index than the navigation content.

Example prompts or workflows

No response

Additional context

No response

[nikolandos-cpu]

{% comment %} UTILITY BAR {% endcomment %}

{{ cart.item_count }} ITEM(S) IN YOUR SHOPPING BAG.

  <div class="utility-right">
    <button type="button" class="localization-trigger" onclick="toggleBrioniDrawer()">
      <span class="utility-text">
        <span id="languageDisplay">ENGLISH</span>
        <span class="divider">|</span> 
        <span class="opacity-60">SHIP TO</span> <span id="regionDisplay">UNITED KINGDOM</span>
      </span>
    </button>
  </div>
</div>

{% comment %} LOCALIZATION DRAWER - ALL 57 COUNTRIES {% endcomment %}

SHIPPING TO

All other countries Argentina Australia Austria Bahrain Belgium Bulgaria Canada Chile China Croatia Cyprus Czech Republic Denmark Estonia Finland France Germany Greece Hong Kong SAR, China Hungary Iceland India Ireland Italy Japan Kuwait Latvia Lithuania Luxembourg Malaysia Malta Monaco Morocco Netherlands New Zealand Norway Panama Paraguay Peru Poland Portugal Qatar Romania Russian Federation Saudi Arabia Singapore Slovakia Slovenia South Africa South Korea Spain Sweden Switzerland Taiwan region Thailand United Arab Emirates United Kingdom United States

You will see the product selection for UNITED KINGDOM with prices in GBP £

    <div class="drawer-input-group">
      <label class="drawer-label">LANGUAGE</label>
      <div class="custom-select-wrapper">
        <select id="languageSelector" class="brioni-select" onchange="updateLanguage(this.value)">
          <option value="ENGLISH" selected>English</option>
          <option value="ITALIANO">Italiano</option>
          <option value="FRANÇAIS">Français</option>
          <option value="DEUTSCH">Deutsch</option>
          <option value="ESPAÑOL">Español</option>
          <option value="日本語">日本語</option>
          <option value="中文">中文</option>
        </select>
      </div>
    </div>

    <div class="drawer-action">
      <button type="button" class="brioni-apply-settings" onclick="toggleBrioniDrawer()">APPLY SETTINGS</button>
    </div>
  </div>
</div>

{% comment %} MAIN HEADER {% endcomment %}

  <div class="header-logo-col">
    <a href="/" class="header-logo-link">
      {%- if section.settings.logo != blank -%}
        {%- assign logo_alt = section.settings.logo.alt | default: shop.name -%}
        <img src="{{ section.settings.logo | img_url: width: 400 }}" class="header-logo-img" alt="{{ logo_alt }}" style="width: {{ section.settings.logo_width }}px;">
      {%- else -%}
        <span class="logo-text">MANOLIS</span>
      {%- endif -%}
    </a>
  </div>

  <nav class="header-nav-col desktop-only">
    <ul class="nav-list">
      {%- assign menu_keys = 'menu_wintertime,menu_formalwear,menu_leisurewear,menu_shoes,menu_accessories,menu_highlights,menu_madetoorder,menu_thehouse,menu_bespoke' | split: ',' -%}
      {%- assign menu_titles = 'WINTERTIME COLLECTION,FORMALWEAR,LEISUREWEAR,SHOES,ACCESSORIES,HIGHLIGHTS,MADE TO ORDER,THE HOUSE,BESPOKE' | split: ',' -%}
      
      {% for key in menu_keys %}
        {% assign menu_handle = section.settings[key] %}
        {% assign index = forloop.index0 %}
        {% if menu_handle != blank %}
          <li class="nav-item">
            <a href="{{ linklists[menu_handle].url | default: '#' }}" class="nav-link">{{ menu_titles[index] }}</a>
            
            {% comment %} MEGA MENU DROPDOWN {% endcomment %}
            <div class="brioni-mega-dropdown">
              <div class="brioni-fluid-container mega-grid">
                <div class="mega-links-column">
                  {% for link in linklists[menu_handle].links %}
                    <div class="mega-link-item">
                      <a href="{{ link.url }}">{{ link.title | upcase }}</a>
                    </div>
                  {% endfor %}
                </div>
                
                {% comment %} FEATURED IMAGE {% endcomment %}
                {% assign menu_name = key | replace: 'menu_', '' %}
                {% assign featured_image_key = menu_name | append: '_featured_image' %}
                {% assign featured_title_key = menu_name | append: '_featured_title' %}
                {% assign featured_link_key = menu_name | append: '_featured_link' %}
                
                {% if section.settings[featured_image_key] != blank %}
                  <div class="mega-featured-column">
                    <a href="{{ section.settings[featured_link_key] }}">
                      <img src="{{ section.settings[featured_image_key] | img_url: width: 600 }}" alt="{{ section.settings[featured_title_key] }}">
                      <p class="featured-title">{{ section.settings[featured_title_key] | upcase }}</p>
                    </a>
                  </div>
                {% endif %}
              </div>
            </div>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </nav>

  <div class="header-icons-col">
    <div class="icons-desktop desktop-only">
      {% if section.settings.show_store_locator %}
      <a href="{{ section.settings.store_locator_link }}" title="Store locator">
        <svg width="{{ section.settings.icon_size }}" height="{{ section.settings.icon_size }}" viewBox="0 0 15 15"><g fill="currentColor" fill-rule="evenodd"><path d="M6.5 0C2.916 0 0 2.745 0 6.119c0 .745.143 1.469.417 2.151.123.281.619 1.318 1.666 2.324.042.037.08.077.123.112L6.5 15l4.312-4.312.674-.677c.435-.512.732-.991.914-1.329.395-.798.6-1.666.6-2.562C13 2.745 10.084 0 6.5 0m0 1C9.532 1 12 3.296 12 6.12c0 .74-.167 1.453-.479 2.087a6.876 6.876 0 01-.772 1.127l-.645.647L6.5 13.586 2.913 9.999l-.054-.053-.035-.029-.049-.045c-.932-.896-1.43-1.825-1.43-1.976A4.74 4.74 0 011 6.119C1 3.296 3.467 1 6.5 1"></path><path d="M6.5 4.25a2 2 0 10.001 4.001A2 2 0 006.5 4.25m0 1a1.001 1.001 0 010 2 1.001 1.001 0 010-2"></path></g></svg>
      </a>
      {% endif %}
      
      <a href="/search" title="Search">
        <svg width="{{ section.settings.icon_size }}" height="{{ section.settings.icon_size }}" viewBox="0 0 15 15"><path d="M6.5 0a6.5 6.5 0 014.912 10.758L15 14.347l-.653.653-3.59-3.588A6.5 6.5 0 116.5 0zm0 1a5.5 5.5 0 103.549 9.702L10 10.653l.653-.653.049.049A5.5 5.5 0 006.5 1z" fill="currentColor"></path></svg>
      </a>
      
      {% if section.settings.show_account %}
      <a href="/account" title="My account">
        <svg width="{{ section.settings.icon_size }}" height="{{ section.settings.icon_size }}" viewBox="0 0 15 15"><g fill="currentColor" fill-rule="evenodd"><path d="M7.5 0C5.034 0 3.012 2.041 3.012 4.531c0 1.551.789 2.918 1.961 3.755C2.284 9.041 0 10.938 0 13.47V15h15v-1.53c0-1.552-.93-3.062-2.567-4.123-.708-.47-1.537-.816-2.406-1.061a4.515 4.515 0 001.961-3.755C11.988 2.021 9.967 0 7.5 0m0 1c1.923 0 3.488 1.584 3.488 3.531 0 1.198-.556 2.266-1.526 2.929L7.697 8.668l2.059.58c.829.233 1.544.548 2.133.939C13.23 11.056 14 12.252 14 13.47V14H1v-.53c0-2.237 2.286-3.672 4.244-4.222l2.009-.564-1.699-1.212c-.966-.689-1.542-1.789-1.542-2.941C4.012 2.584 5.577 1 7.5 1"></path></g></svg>
      </a>
      {% endif %}
      
      <a href="/cart" title="Shopping Bag">
        <svg width="{{ section.settings.icon_size }}" height="{{ section.settings.icon_size }}" viewBox="0 0 15 15" fill="none"><path d="M7.5 0C8.998 0 9.823 1.333 9.974 4H14L15 15H0L1 4H5.026C5.177 1.333 6.002 0 7.5 0ZM13.187 5H1.813L1 14H14L13.187 5ZM7.5 1C6.603 1 6.09 1.897 6 4H9C8.91 1.897 8.397 1 7.5 1Z" fill="currentColor"/></svg>
      </a>
    </div>

    <div class="icons-mobile mobile-only">
      <a href="/search">
        <svg width="{{ section.settings.mobile_icon_size }}" height="{{ section.settings.mobile_icon_size }}" viewBox="0 0 15 15"><path d="M6.5 0a6.5 6.5 0 014.912 10.758L15 14.347l-.653.653-3.59-3.588A6.5 6.5 0 116.5 0zm0 1a5.5 5.5 0 103.549 9.702L10 10.653l.653-.653.049.049A5.5 5.5 0 006.5 1z" fill="currentColor"></path></svg>
      </a>
      <button onclick="toggleBrioniDrawer()">
         <svg width="{{ section.settings.mobile_icon_size }}" height="{{ section.settings.mobile_icon_size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
      </button>
      <button onclick="toggleMobileMenu()">
        <svg width="{{ section.settings.mobile_icon_size }}" height="{{ section.settings.mobile_icon_size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M4 7H20M4 12H20M4 17H20"/></svg>
      </button>
    </div>
  </div>
</div>

{% comment %} MOBILE MENU OVERLAY {% endcomment %}

×

{%- assign menu_keys = 'menu_wintertime,menu_formalwear,menu_leisurewear,menu_shoes,menu_accessories,menu_highlights,menu_madetoorder,menu_thehouse,menu_bespoke' | split: ',' -%} {%- assign menu_titles = 'WINTERTIME COLLECTION,FORMALWEAR,LEISUREWEAR,SHOES,ACCESSORIES,HIGHLIGHTS,MADE TO ORDER,THE HOUSE,BESPOKE' | split: ',' -%}

{% for key in menu_keys %}
  {% assign menu_handle = section.settings[key] %}
  {% assign index = forloop.index0 %}
  {% if menu_handle != blank %}
    <div class="mobile-menu-item">
      <a href="{{ linklists[menu_handle].url | default: '#' }}">{{ menu_titles[index] }}</a>
    </div>
  {% endif %}
{% endfor %}

<div class="mobile-divider"></div>

{% if section.settings.show_store_locator %}
<div class="mobile-menu-item">
  <a href="{{ section.settings.store_locator_link }}">STORE LOCATOR</a>
</div>
{% endif %}

<div class="mobile-menu-item">
  <a href="/account">MY ACCOUNT</a>
</div>

<div class="mobile-menu-item">
  <button type="button" onclick="toggleBrioniDrawer(); toggleMobileMenu();" style="background:none;border:none;color:#fff;cursor:pointer;padding:0;width:100%;text-align:left;font-size:18px;letter-spacing:3px;">
    LANGUAGE: <span id="mobileLangDisplay">ENGLISH</span> | COUNTRY: <span id="mobileCountryCode">GB</span>
  </button>
</div>

<style> .brioni-header-wrapper { background: #000; color: #fff; font-family: 'Cormorant Garamond', serif; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; } .brioni-fluid-container { padding: 0 40px; display: flex; align-items: center; justify-content: space-between; } .brioni-utility-bar { height: 30px; border-bottom: 1px solid #333; font-size: 10px; letter-spacing: 1px; } .utility-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; } .utility-text { font-weight: 300; } .utility-link-underline { text-decoration: underline !important; } .localization-trigger { background: none; border: none; cursor: pointer; color: #fff; } .divider { margin: 0 8px; } .opacity-60 { opacity: 0.6; } /* LOCALIZATION DRAWER */ .brioni-localization-drawer { background: #000; max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; border-bottom: 1px solid #333; } .[brioni-localization-drawer.is](http://brioni-localization-drawer.is/)-active { max-height: 400px; padding-bottom: 40px; } .drawer-grid-layout { display: grid; grid-template-columns: 1.5fr 1.5fr 1fr; gap: 30px; padding-top: 50px; align-items: flex-start; } .drawer-label { font-size: 8px; letter-spacing: 2px; margin-bottom: 10px; display: block; color: #999; text-transform: uppercase; } .brioni-select { background: transparent; border: 1px solid #fff; color: #fff; padding: 12px 15px; width: 100%; font-family: inherit; font-size: 14px; appearance: none; cursor: pointer; } .drawer-caption { font-size: 11px; color: #999; text-transform: none !important; margin-top: 8px; font-style: italic; } .brioni-apply-settings { background: transparent; border: 1px solid #fff; color: #fff; width: 100%; padding: 12px; font-size: 12px; letter-spacing: 2px; cursor: pointer; transition: 0.3s; text-transform: uppercase; } .brioni-apply-settings:hover { background: #fff; color: #000 !important; } /* MAIN HEADER */ .brioni-main-header { height: 80px; position: sticky; top: 0; z-index: 100; background: #000; } .header-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; } .header-logo-img { max-height: 50px; width: auto; } .logo-text { font-size: 24px; letter-spacing: 5px; color: #fff; } /* NAVIGATION */ .nav-list { display: flex; list-style: none; gap: 25px; padding: 0; margin: 0; } .nav-item { position: relative; } .nav-link { color: #fff; text-decoration: none; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } /* MEGA MENU DROPDOWN */ .brioni-mega-dropdown { position: absolute; top: 80px; left: 0; width: 100vw; background: rgba(0,0,0,0.95); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.1); } .nav-item:hover .brioni-mega-dropdown { opacity: 1; visibility: visible; } .mega-grid { display: grid; grid-template-columns: 1fr 400px; gap: 60px; } .mega-links-column { display: flex; flex-direction: column; gap: 15px; } .mega-link-item a { font-size: 12px; letter-spacing: 1px; transition: opacity 0.3s; color: #fff; text-decoration: none; text-transform: uppercase; } .mega-link-item a:hover { opacity: 0.6; } .mega-featured-column img { width: 100%; height: auto; margin-bottom: 15px; } .featured-title { font-size: 11px; letter-spacing: 1.5px; margin-top: 10px; color: #fff; } /* ICONS */ .icons-desktop, .icons-mobile { display: flex; gap: 20px; align-items: center; } .icons-desktop a, .icons-mobile a, .icons-mobile button { color: #fff; } /* MOBILE MENU */ .brioni-mobile-menu { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: #000; z-index: 10000; transition: right 0.4s; padding: 60px 30px; overflow-y: auto; } .[brioni-mobile-menu.is](http://brioni-mobile-menu.is/)-active { right: 0; } .mobile-close { position: absolute; top: 20px; right: 25px; background: none; border: none; font-size: 32px; cursor: pointer; line-height: 1; font-weight: 200; color: #fff; } .mobile-menu-content { display: flex; flex-direction: column; gap: 25px; } .mobile-menu-item a, .mobile-menu-item button { font-size: 18px; letter-spacing: 3px; display: block; padding: 8px 0; color: #fff; text-decoration: none; text-transform: uppercase; } .mobile-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 20px 0; } .desktop-only { display: flex; } .mobile-only { display: none; } @media (max-width: 1024px) { .brioni-fluid-container { padding: 0 20px; } .desktop-only { display: none !important; } .mobile-only { display: flex !important; } .drawer-grid-layout { grid-template-columns: 1fr; gap: 20px; padding-top: 30px; } } body.scroll-locked { overflow: hidden; position: fixed; width: 100%; } body { padding-top: 110px; } </style> <script> function toggleBrioniDrawer() { const drawer = document.getElementById('BrioniDrawer'); drawer.classList.toggle('is-active'); } function toggleMobileMenu() { const menu = document.getElementById('MobileMenuOverlay'); menu.classList.toggle('is-active'); document.body.classList.toggle('scroll-locked'); } function updateRegion(region) { const regionDisplay = document.getElementById('regionDisplay'); const selectedCountryText = document.getElementById('selectedCountryText'); const mobileCountryCode = document.getElementById('mobileCountryCode'); const countryCodes = { 'UNITED KINGDOM': 'GB', 'UNITED STATES': 'US', 'FRANCE': 'FR', 'GERMANY': 'DE', 'ITALY': 'IT', 'SPAIN': 'ES', 'JAPAN': 'JP', 'CHINA': 'CN', 'AUSTRALIA': 'AU', 'CANADA': 'CA' }; if(regionDisplay) regionDisplay.textContent = region; if(selectedCountryText) selectedCountryText.textContent = region; if(mobileCountryCode && countryCodes[region]) { mobileCountryCode.textContent = countryCodes[region]; } localStorage.setItem('brioniRegion', region); } function updateLanguage(language) { const languageDisplay = document.getElementById('languageDisplay'); const mobileLangDisplay = document.getElementById('mobileLangDisplay'); if(languageDisplay) languageDisplay.textContent = language; if(mobileLangDisplay) mobileLangDisplay.textContent = language; localStorage.setItem('brioniLanguage', language); } window.addEventListener('DOMContentLoaded', function() { const savedRegion = localStorage.getItem('brioniRegion'); const savedLanguage = localStorage.getItem('brioniLanguage'); if(savedRegion) { const countrySelector = document.getElementById('countrySelector'); if(countrySelector) { countrySelector.value = savedRegion; updateRegion(savedRegion); } } if(savedLanguage) { const languageSelector = document.getElementById('languageSelector'); if(languageSelector) { languageSelector.value = savedLanguage; updateLanguage(savedLanguage); } } }); </script>

{% schema %}
{
"name": "Brioni header master",
"settings": [
{
"type": "header",
"content": "Logo Settings"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "logo_width",
"label": "Logo width",
"min": 50,
"max": 300,
"step": 5,
"default": 140,
"unit": "px"
},

{
  "type": "header",
  "content": "Icon Settings"
},
{
  "type": "checkbox",
  "id": "show_store_locator",
  "label": "Show store locator",
  "default": true
},
{
   "type": "url",

"id": "store_locator_link",
"label": "Store locator link"
},
{
"type": "checkbox",
"id": "show_account",
"label": "Show account icon",
"default": true
},
{
"type": "range",
"id": "icon_size",
"label": "Desktop icon size",
"min": 12,
"max": 24,
"step": 1,
"default": 15,
"unit": "px"
},
{
"type": "range",
"id": "mobile_icon_size",
"label": "Mobile icon size",
"min": 16,
"max": 28,
"step": 1,
"default": 18,
"unit": "px"
},

{
  "type": "header",
  "content": "Menu 1: Wintertime Collection"
},
{
  "type": "link_list",
  "id": "menu_wintertime",
  "label": "Wintertime menu"
},
{
  "type": "image_picker",
  "id": "wintertime_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "wintertime_featured_title",
  "label": "Featured title",
  "default": "WINTERTIME COLLECTION"
},
{
  "type": "url",
  "id": "wintertime_featured_link",
  "label": "Featured link"
},

{
  "type": "header",
  "content": "Menu 2: Formalwear"
},
{
  "type": "link_list",
  "id": "menu_formalwear",
  "label": "Formalwear menu"
},
{
  "type": "image_picker",
  "id": "formalwear_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "formalwear_featured_title",
  "label": "Featured title",
  "default": "FORMALWEAR"
},
{
  "type": "url",
  "id": "formalwear_featured_link",
  "label": "Featured link"
},

{
  "type": "header",
  "content": "Menu 3: Leisurewear"
},
{
  "type": "link_list",
  "id": "menu_leisurewear",
  "label": "Leisurewear menu"
},
{
  "type": "image_picker",
  "id": "leisurewear_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "leisurewear_featured_title",
  "label": "Featured title",
  "default": "LEISUREWEAR"
},
{
  "type": "url",
  "id": "leisurewear_featured_link",
  "label": "Featured link"
},

{
  "type": "header",
  "content": "Menu 4: Shoes"
},
{
  "type": "link_list",
  "id": "menu_shoes",
  "label": "Shoes menu"
},
{
  "type": "image_picker",
  "id": "shoes_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "shoes_featured_title",
  "label": "Featured title",
  "default": "SHOES"
},
{
  "type": "url",
  "id": "shoes_featured_link",
  "label": "Featured link"
},

{
  "type": "header",
  "content": "Menu 5: Accessories"
},
{
  "type": "link_list",
  "id": "menu_accessories",
  "label": "Accessories menu"
},
{
  "type": "image_picker",
  "id": "accessories_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "accessories_featured_title",
  "label": "Featured title",
  "default": "ACCESSORIES"
},
{
  "type": "url",
  "id": "accessories_featured_link",
  "label": "Featured link"
},

{
  "type": "header",
  "content": "Menu 6: Highlights"
},
{
  "type": "link_list",
  "id": "menu_highlights",
  "label": "Highlights menu"
},
{
  "type": "image_picker",
  "id": "highlights_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "highlights_featured_title",
  "label": "Featured title",
  "default": "HIGHLIGHTS"
},
{
  "type": "url",
  "id": "highlights_featured_link",
  "label": "Featured link"
},

{
  "type": "header",
  "content": "Menu 7: Made to Order"
},
{
  "type": "link_list",
  "id": "menu_madetoorder",
  "label": "Made to Order menu"
},
{
  "type": "image_picker",
  "id": "madetoorder_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "madetoorder_featured_title",
  "label": "Featured title",
  "default": "MADE TO ORDER"
},
{
  "type": "url",
  "id": "madetoorder_featured_link",
  "label": "Featured link"
},

{
  "type": "header",
  "content": "Menu 8: The House"
},
{
  "type": "link_list",
  "id": "menu_thehouse",
  "label": "The House menu"
},
{
  "type": "image_picker",
  "id": "thehouse_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "thehouse_featured_title",
  "label": "Featured title",
  "default": "THE HOUSE"
},
{
  "type": "url",
  "id": "thehouse_featured_link",
  "label": "Featured link"
},

{
  "type": "header",
  "content": "Menu 9: Bespoke"
},
{
  "type": "link_list",
  "id": "menu_bespoke",
  "label": "Bespoke menu"
},
{
  "type": "image_picker",
  "id": "bespoke_featured_image",
  "label": "Featured image"
},
{
  "type": "text",
  "id": "bespoke_featured_title",
  "label": "Featured title",
  "default": "BESPOKE"
},
{
  "type": "url",
  "id": "bespoke_featured_link",
  "label": "Featured link"
}

],
"presets": [
{
"name": "Brioni header master"
}
]
}
{% endschema %}