Want to create a hamburger menu for all pages except home.

Highlighted
New Member
1 0 0

I have minimum Java, moderate HTML and CSS knowledge.  I am trying to force my site to utilize the mobile hamburger menu on all pages except the Home page, when viewed on a computer.

Not even sure where to start, theme is Loft.  

I would be happy just taking the mobile menu and making it the main menu, but not sure what to pull to create the separate template.

 

Current header code for all pages:

<!-- /sections/header.liquid -->
{%assign overlay_color = section.settings.mega-nav-overlay-color%}
{%assign overlay_opacity = section.settings.mega-nav-overlay-opacity | times: 0.01 %}
{% assign logo_location = section.settings.logo-location %}
{%- assign locale_selector = false -%}
{%- assign currency_selector = false -%}
{%- if currency and shop.enabled_currencies.size > 1 -%}
  {%- assign currency_selector = true -%}
{%- endif -%}
{%- if section.settings.enable_language and shop.published_locales.size > 1 -%}
  {%- assign locale_selector = true -%}
{%- endif -%}
{% case section.settings.nav-layout %}
  {% when 'left' %}
    {% assign logo_location = "left" %}
    {% assign nav_location = "center" %}
    {% assign crossborder_location = "right" %}
    {% assign icon_location = "narrow-right" %}
    {% assign nav_justification = "text-left" %}
  {% when 'center' %}
    {% assign nav_location = "left" %}
    {% assign logo_location = "center" %}
    {% assign crossborder_location = "right" %}
    {% assign icon_location = "right-end" %}
    {% assign nav_justification = "text-left" %}
  {% when 'center-below' %}
    {% assign crossborder_location = "left" %}
    {% assign logo_location = "center-inline" %}
    {% assign icon_location = "right-end-wide" %}
    {% assign nav_location = "below" %}
    {% assign nav_justification = "text-center" %}
  {% else %}
    {% assign crossborder_location = "right" %}
    {% assign logo_location = "left" %}
    {% assign icon_location = "right" %}
    {% assign nav_location = "below-left" %}
    {% assign nav_justification = "text-left" %}
{% endcase %}
<style>
{% if section.settings.header_position %}
  .sticky-promo{
    position: fixed;
    z-index: 9000;
    width:100%;
  }
{%else%}
  .promo-bar-offset{
    top:0;
  }
  .promo-header-offset{
    position:relative;
  }
{%endif%}

.header__logo h1 img{
  width:{{section.settings.logo_max_width}}px;
  height:100%;
}
@media screen and (max-width:998px){
.header__logo .site-header__logo-{{ logo-location }} a{
  max-width:200px;
}
} 

{%unless section.settings.advanced_search%}
.search-dropdown{
  min-height: initial !important;
}
{%endunless%}

.site-header{
  align-items: initial;
  align-content: inherit;
{%if section.settings.promo-text != blank%}
  min-height:100px;
  {%else%}  
  min-height:70px;
{%endif%}
{% if section.settings.header_position %}
  position:fixed;
{%else%}
  position:relative;
{%endif%}
}

{%if section.settings.mega_ad_image%}  
.site-header .nav-section-ad{
  padding:0;
  display:block;
}
.nav-section-ad > div{
  width:100%;
  height:100%;
}
{%endif%}

{%if section.settings.header_position%}
.site-nav__link{
padding:5px 10px;
}
{%else%}
.site-nav__link{
padding:10px 10px;
}
{%endif%}

@media screen and (min-width:769px){ 
 {%if section.settings.header_position != true%}
.site-header.static-padding{
  padding-top:0;
}
{%else%}
  .main-content{
  {%if section.settings.promo-text != blank%}
  margin-top:100px;
  {%else%}
  margin-top:70px;
  {%endif%}
}

{%endif%}
}

{%if section.settings.promo_enable and section.settings.promo-text != blank%}
    {%if section.settings.mobile_nav_location == 'top'%}
      @media screen and (max-width:768px){
             .sticky-header {
                bottom: 15px;
                top: inherit;
              }
              .sticky-header.search-is-open{
                bottom:0;
              }
              .sticky-footer { 
                top: 30px;
              }
              .cart-top-buttons{
                top: 15%;
              }
      }
       @media screen and (max-width: 414px){
            .sticky-footer { 
              top: 30px;
            }
           
            .cart-top-buttons{
              top: 15%;
            }
        }

     {%else%} 

     @media screen and (max-width:768px){
              
             .template-product .product-top-buttons.grid--full{
              padding-top:45px;

             }
             .cart-top-buttons{
              top:30px;
             }
          
            .sticky-header{
              top:25px;
            }
            .sticky-header.search-is-open{
              top:0;
            }

      }

    {%endif%}
{%endif%}
{%if section.settings.promo_enable == false%}
  {%if section.settings.mobile_nav_location == 'top'%}
   @media screen and (max-width: 768px){
    .sticky-header {
      bottom: 15px;
      top: inherit;
   }
   .sticky-header.search-is-open{
     bottom:0;
   }
    
    .sticky-footer { 
      top: 0;
    }
    .cart-top-buttons{
      top: 12%;
    }
  } 
  
  @media screen and (max-width: 414px){
    .main-content {
      margin-top: 17%;
    }
    
    .sticky-footer { 
      top: 0;
    }
    .cart-top-buttons{
      top: 12%;
    }
  }   

    {%endif%}
{%endif%}
.site-nav > li {
{%if section.settings.mega_menu_toggle%}
position:initial;
{%else%}
position:relative;
{%endif%}
}
.dim,
.dimSearch{
background-color:{{ overlay_color | hex_to_rgba: overlay_opacity }};
}
.promo-bar a {
color: {{ settings.promo_text_link }};
}
</style>

{% assign nav_promo = false %}
{% if section.settings.mega_ad_image or section.settings.mega-menu-ad-title != blank or section.settings.mega-menu-ad-subtitle != blank %}
  {% assign nav_promo = true %}
{%endif%}
<div data-section-id="{{section.id}}" data-section-type="header">
<div class="nav-bar promo-bar-offset">
<header id="header" data-position="{{section.settings.header_position}}" class="promo-bar-offset site-header animated fadeIn {%unless section.settings.header_position%}static-padding{%endunless%}">
  <div class="header__wrapper">
    <div class="header__content">
      <div class="header__logo header__logo--{{ logo_location }} {% if section.settings.logo == none %}header-store-name{% endif %}">
        {% if section.settings.logo == none %}
          <div class="textFill-parent">
        {%endif%}
        <h1 itemscope itemtype="http://schema.org/Organization">
          {% if section.settings.logo %}
            <a href="{{routes.root_url}}" itemprop="url" class="site-header__logo-image">
              {% capture image_size %}{{ section.settings.logo_max_width }}{% endcapture %}
              <img src="{{ section.settings.logo | img_url: image_size, scale: 2}}"
                  srcset="{{ section.settings.logo | img_url: image_size, scale: 2}} 1x, {{ section.settings.logo | img_url: image_size, scale: 3 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}"
                  itemprop="logo">
            </a>
          {% else %}
            <a href="{{routes.root_url}}" itemprop="url"><span>{{ shop.name }}</span></a>
          {% endif %}
        </h1>
        {% if section.settings.logo == none %}
      </div>
     {%endif%}
  </div>
<div class="header__nav header__nav--{{ nav_location }} medium-down--hide">
  <!-- begin site-nav -->
  <nav aria-label="DesktopNavigation" tabindex="1">
    <div class="predictive-search__overlay js-desktop-search-open"></div>
  <ul class="site-nav {%if section.settings.mega_menu_toggle == true%}mega-menu{%else%}single-menu{%endif%} {{ nav_justification }}" id="AccessibleNav" role="menubar">
  {%- assign singleCount = 0 -%}
  {% assign mainMenu = section.settings.mainMenu %}

    {% for link in linklists[mainMenu].links %}
      {% if link.links != blank %}
        <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true" role="menuitem">

          <!-- Display the parent link -->
          <a href="{{ link.url }}" class="site-nav__link site-nav--has-dropdown_link animated fadeIn">
            {{ link.title }}
            <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </a>

          <!-- Create the container to house child and grandchild link -->
          <div class="animated fadeIn nav-menu-js {% if section.settings.mega_menu_toggle == true %}main-menu-dropdown{% else %}single-dropdown{% endif %} {%if section.settings.header_position == true%} main-menu--sticky-{{section.settings.header_position}}{% endif %} child-link">
            <div class="single-menu-container">
              <ul class="site-nav__dropdown {% if linklists[grandchild_list_handle].links == blank %}child-div grandchild-link {%endif%} {% if section.settings.mega_ad_image or section.settings.mega-menu-ad-title != blank or section.settings.mega-menu-ad-subtitle != blank %}nav-ul-container{%else%}large--one-whole{%endif%}" role="menu">
              {%- assign sideEnd = false -%}
              {%- assign mainNav = false -%}
              {% assign singleCount = 0 %}
              {% assign group_count = 0 %}
              {% for childlink in link.links %}   
                {% if childlink.links != blank %}
                  {%- assign mainNav = true -%}
                  {%- assign sideEnd = true -%}
                  {% assign group_count = group_count | plus: 1 %}
                {%endif%}
              {%endfor%}
              {% if section.settings.mega_menu_toggle == true %}
                {% for childlink in link.links %}   
                  {% unless childlink.links != blank %}
                      {% assign singleCount = singleCount | plus:1 %}
                  {%endunless%}
                {%endfor%}
                {% if singleCount > 0 %}
                    <div class="side-end {% unless mainNav %}all-single{% endunless %}">
                      {% for childlink in link.links %}  
                        {% unless childlink.links != blank %}
                          <li class="child-site-nav__link children-end site-nav__link child-div {% if childlink.active %} site-nav--active{% endif %}" role="menuitem">
                            <a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
                          </li>
                        {% endunless %}
                      {% endfor %}
                    </div>
                {% endif %}
              {% endif %}
            <div class="main-nav-wrap {% if group_count >= 4 %} loft-flex-grow {% endif %} {% if section.settings.mega_menu_toggle == false %} loft-flex-grow {% endif %}" {%unless sideEnd %}style="width:100%" {%endunless%}>
              {% for childlink in link.links %}   
            <!-- gather grandchild links -->
            {% if childlink.links != blank %}
              <li class="child-site-nav__link child-div  has-children p--bold {% if childlink.active %} site-nav--active{% endif %}" role="menuitem" aria-haspopup="true" >
                <a href="{{ childlink.url }}" class="site-nav__link nav-section-header">{{ childlink.title | escape }}</a>        
                <span class="single-drop-arrow" aria-hidden="true">{% include 'icon_chevron' %}</span>  
                <!-- begin grandchild link -->
                <div class="grandchild-link mega-child animated fadeIn">
                  <ul role="menu">
                    {% for grandchildlink in childlink.links %}
                      <li class="{% if grandchildlink.active %} site-nav--active {% endif %} grandchild-{{ forloop.length }}" role="menuitem" >
                        <a href="{{ grandchildlink.url}}" class="site-nav__link">{{ grandchildlink.title | escape }}</a>
                      </li>
                    {% endfor %}
                  </ul>
                </div>           
              </li>
              {% else %}
                {% unless section.settings.mega_menu_toggle == true %}
                  <li class="child-site-nav__link {%if section.settings.mega_menu_toggle == true%} children-end {%endif%} site-nav__link child-div children-{%if forloop.length <= 4%}{{ forloop.length }}{%else%}4{%endif%}{% if childlink.active %} site-nav--active{% endif %}" role="menuitem">
                          <a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
                  </li>
                {% endunless %}
              {% endif %}              
              {% endfor %}
            </div>
            </ul>
          </div>
            {% if section.settings.mega_ad_image or section.settings.mega-menu-ad-title != blank or section.settings.mega-menu-ad-subtitle != blank  %}
                <div class="nav-section-ad-container">
                  <div class="nav-section-ad-wrapper nav-section-ad large--one-fifth animated fadeIn">
                    <div class="secondary">
                     {%if section.settings.mega_ad_image%}
                      {%if section.settings.mega-menu-ad-image-link != blank%}<a href="{{section.settings.mega-menu-ad-image-link}}">{%endif%}
                      <img src="{{ section.settings.mega_ad_image| img_url: '1024x1024' }}">
                        {%if section.settings.mega-menu-ad-image-link != blank%}</a>{%endif%}
                      {%else%}
                     
                      <h2 class="secondary">{{section.settings.mega-menu-ad-title | truncatewords:10}}</h2>
                      {{section.settings.mega-menu-ad-subtitle | truncatewords:20}}
                      {%if section.settings.mega-menu-ad-cta-text != '' and section.settings.mega-menu-ad-cta-text-link != blank %} <a class="btn--secondary" href="{{section.settings.mega-menu-ad-cta-text-link}}">{{section.settings.mega-menu-ad-cta-text | truncatewords:5}}</a>{%endif%}
                      {%endif%}
                    </div>
                  </div>
                </div>
                {%endif%}       
          </div>
      </li>
      {% else %}
      <li {% if link.active %}class="site-nav--active"{% endif %} role="menuitem">
        <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
      </li>
      {% endif %}
      {% endfor %}
    </ul>
  </nav>
  <!-- //site-nav -->
</div>
{%- if section.settings.nav-layout == "center-below" -%}
  <div class="header__crossborder header__crossborder--{{ crossborder_location }}">  
    {%- if section.settings.enable_language or section.settings.enable_currency -%}
      {% render 'multiple-currency-language-form', location:"header", language:{{section.settings.enable_language}}, currency:{{section.settings.enable_currency}} %}
      {%- if shop.published_locales.size <= 1 and shop.enabled_currencies.size <= 1 -%}
        <a class="js-search-open" href="#" onClick="return false;">
          {% include 'icon_search' %}
        </a>
      {%- endif -%}
    {%- else -%}
      <a class="js-search-open" href="#" onClick="return false;">
        {% include 'icon_search' %}
      </a>
    {%- endif -%}
  </div> 
{%- endif -%} 
<div class="large--text-right  medium-down--hide header-icons header__icons--{{ icon_location }} icon-wrapper">
  {%- if section.settings.nav-layout != "center-below" -%}
    {%- if section.settings.enable_language or section.settings.enable_currency -%}
      <div class="header__crossborder">  
        {% render 'multiple-currency-language-form', location:"header", language:{{section.settings.enable_language}}, currency:{{section.settings.enable_currency}} %}
      </div> 
    {%- endif -%}
  {%- endif -%}
  
<div class="header__icon-group">
  <div id="search-wrapper">
    {%- if section.settings.nav-layout != "center-below" -%}
      <a class="js-search-open" href="#" onClick="return false;">
        {% include 'icon_search' %}
      </a>
    {%- else -%}
      {%- if section.settings.enable_language or section.settings.enable_currency -%}
        {%- if shop.published_locales.size > 1 or shop.enabled_currencies.size > 1 -%}
          <a class="js-search-open" href="#" onClick="return false;">
            {% include 'icon_search' %}
          </a>
        {%- endif -%}
      {%- endif -%}
    {%- endif -%}
    <div class="search-dropdown js-search-dropdown animated fadeIn">
      <div class="wrapper search-content">
        <form class="input-group search-bar" action="{{routes.search_url}}" method="get" role="search">
          <div class="one-whole predictive-search__wrapper text-left">
              <div class="search-input-field">
                {% assign nice_terms = search.terms | split: '??' | first  %}
                <input type="search" id="searchInput" name="q" value="{{ nice_terms | escape }}" placeholder="{{ 'general.search.placeholder' | t: shop: shop.name  }}" autofocus class="predictive-search__input input-group-field js-search-query" aria-label="{{ 'general.search.placeholder' | t }}">
                <span class="icon icon-x predictive-search_close predictive-search_close--desktop js-desktop-search-exit" id="desktop-search-exit" aria-hidden="true"></span>
              </div>
              <div class="predictive-search__results-group">
                <div id="predictive-search__loader" class="predictive-search__loader" style="display:none;"></div>
                <div class="predictive-search__results-container product-results search--predictive-results">
                  <h6 class="content__inherit-colors">{{"general.search.product_title" | t }}</h6>
                  <div></div>
                </div>
                <div class="search--results-container--side page-results search--predictive-results" style="display:none;">
                  <h6 class="content__inherit-colors">{{"general.search.page_title" | t }}</h6>
                  <ul class="search__result-group margin--none list--none"></ul>
                </div>
                <div class="search--results-container--side blog-results search--predictive-results" style="display:none;">
                  <h6 class="content__inherit-colors">{{"general.search.article_title" | t }}</h6>
                  <ul class="search__result-group margin--none list--none"></ul>
                </div>
              </div>
          </div>
        </form>
      
      </div>
      
    </div>
  </div>
  {% if shop.customer_accounts_enabled %}
    <a href="{{ routes.account_url }}">
      {% include 'icon_account' %}
    </a>
  {%endif%}

  <a class="cart-wrapper js-cart-icon" href="{{ routes.cart_url }}">
    <div id="cart-svg-count" class="cart-item-count{%if cart.item_count > 0%} cart-show{%endif%}{%if cart.item_count > 9%} cart-extra-pad{%endif%}">{{cart.item_count}}</div>
    {% include 'icon_cart' %}
  </a>
  {% comment %}
  Show number of items in the cart and total cost in the /cart link
  Ajax Cart Notes:
  - #cartCount updates the total number of items in the cart
  - #cartCost updates the total cost of the cart
  - Documentation:  http://shopify.com/timber#ajax-cart
  {% endcomment %}
  <div class="js-cart-count" style="display:none;">
    <a href="{{ routes.cart_url }}" class="site-header__cart-toggle js-drawer-open-right">
      <span class="icon icon-cart" aria-hidden="true"></span>
      {{ 'layout.cart.title' | t }}
      (<span id="CartCount">{{ cart.item_count }}</span>
      {{ 'layout.cart.items_count' | t: count: cart.item_count }}
      <span id="CartCost">{{ cart.total_price | money }}</span>)
    </a>
  </div>
</div>
</div>
</div>
</div>
</header>
</div>

<div class="dim"></div>
<div id="NavDrawer" class="drawer drawer--bottom">
<div class="drawer__header">
<div class="drawer__close js-drawer-close">
  <button type="button" class="icon-fallback-text">
    <span class="icon icon-x" aria-hidden="true"></span>
    <span class="fallback-text">{{ 'layout.drawers.close_menu' | t }}</span>
  </button>
</div>
</div>

<!-- begin mobile-nav -->
{% include 'loft-nav' %}
<div class="mobile__nav-social-media">
  {%- if section.settings.enable_language or section.settings.enable_currency -%}
    {% render 'multiple-currency-language-form', location:"mobile-drawer", language:{{section.settings.enable_language}}, currency:{{section.settings.enable_currency}} %}
  {%- endif -%}
  {% if section.settings.navigation_account_enable %}
    {% if shop.customer_accounts_enabled %}
      {% if customer %}
        <div class="mobile-account-link p--bold">
          {% if customer.first_name != blank %}
          {% capture first_name %}{{ customer.first_name }}{% endcapture %}
          <a href="{{ routes.account_url }}">{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}</a>
          {% else %}
          <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
          {% endif %}
        </div>
        <div class="mobile-account-link p--bold">
          {{ 'layout.customer.log_out' | t | customer_logout_link }}
        </div>
      {% else %}
        <div class="mobile-account-link p--bold">
          {{ 'layout.customer.log_in' | t | customer_login_link }}
        </div >
        <div class="mobile-account-link p--bold">
          {{ 'layout.customer.create_account' | t | customer_register_link }}
        </div>
    {% endif %}
  {% endif %}
{% endif %}

{% if section.settings.navigation_social_enable %}
  {% include "navigation-social-media" %}
{% endif %}
</div>
</div>
{% if section.settings.ajax_cart_method == "drawer" %}
<div id="CartDrawer" class="drawer drawer--right">
<div class="drawer__header">
<div class="drawer__title h3">{{ 'cart.general.title' | t }}</div>
<div class="drawer__close js-drawer-close">
  <button type="button" class="icon-fallback-text">
    <span class="icon icon-x" aria-hidden="true"></span>
    <span class="fallback-text">{{ 'cart.general.close_cart' | t | json }}</span>
  </button>
</div>
</div>
<div id="CartContainer"></div>
</div>
{% endif %}
<div class="large--hide medium-down--show sticky-header">
<div class="search-dropdown-mobile js-mobile-search-dropdown"> 
<span class="icon icon-x js-mobile-search-exit predictive-search_close predictive-search_close--mobile" id="mobile-search-exit" aria-hidden="true"></span>
<div class="wrapper search-content">
  <form class="medium-down--show input-group search-bar" action="{{ routes.search_url }}" method="get"  role="search">
    <div class=" one-whole search-grid-wrapper">
      <div class=" one-whole">
        <div class="one-whole predictive-search__wrapper text-left">
          <div class="search-input-field">
            {% assign nice_terms = search.terms | split: '??' | first  %}
            <input type="search" id="searchInput" name="q" value="{{ nice_terms | escape }}" placeholder="{{ 'general.search.placeholder' | t: shop: shop.name  }}" autofocus class="predictive-search__input input-group-field js-search-query-mobile" aria-label="{{ 'general.search.placeholder' | t }}">
          </div>
          <div class="predictive-search__results-mobile-container product-results search--predictive-results">
            <h6 class='content__inherit-colors'>{{"general.search.product_title" | t }}</h6>
            <div></div>
          </div>
          <div class="search--results-container--side page-results search--predictive-results" style="display:none;">
            <h6 class="content__inherit-colors">{{"general.search.page_title" | t }}</h6>
            <ul class="margin--none list--none"></ul>
          </div>
          <div class="search--results-container--side blog-results search--predictive-results" style="display:none;">
            <h6 class="content__inherit-colors">{{"general.search.article_title" | t }}</h6>
            <ul class="margin--none list--none"></ul>
          </div>
      </div>
      </div>
    </div>
  </form>
</div>
</div>
</div>
<div class="large--hide medium-down--show sticky-footer sticky-position--{{section.settings.mobile_nav_location}}" data-mobile="{{section.settings.mobile_nav_location}}">
<div class="one-third mobile-hamburger">
  <div class="site-nav--mobile">
    <button type="button" class="icon-fallback-text js-drawer-open-left mobile-header__icon" aria-controls="NavDrawer" aria-expanded="false">
      {% include 'icon_hamburger' %}
      <span class="fallback-text">{{ 'layout.navigation.menu' | t }}</span>
    </button>
  </div>
</div>
<div class="one-third mobile-logo">
{% if section.settings.logo %}
<a href="{{routes.root_url}}" itemprop="WebPage" class="site-header__logo-image">
  {% capture image_size %}{{ section.settings.logo_max_width }}{% endcapture %}
  <img src="{{ section.settings.logo | img_url: image_size | scale: 2  }} 1x"
       srcset="{{ section.settings.logo | img_url: image_size, scale: 2 }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
       alt="{{ section.settings.logo.alt | default: shop.name }}"
       itemprop="logo">
</a>
{% else %}
{% assign store_name = shop.name | size %}
<a class="shop-name shop-name-{{ store_name }} site-header__logo-text" href="{{routes.root_url}}">{{ shop.name | truncate:30 }}</a>
{% endif %}
</div>
<div class="one-third mobile-header__icon">
  <a class="js-mobile-search-open" href="#" onClick="return false;">
    {% include 'icon_search' %}
  </a>
  <a class="cart-wrapper js-cart-mobile-icon" href="{{routes.cart_url}}">
    <div id="mobile-cart-svg-count" class="cart-item-count{%if cart.item_count > 0%} cart-show{%endif%}{%if cart.item_count > 9%} cart-extra-pad{%endif%}">{{cart.item_count}}</div>
    {% include 'icon_cart' %}
  </a>
</div>
</div>
</div>

{% schema %}
{
    "name": "Header",
    "class": "section-header",
    "settings": [
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "select",
        "id": "nav-layout",
        "options": [
            {
              "value": "left",
              "label": "Logo left, navigation inline"
            },
            {
              "value": "left-below",
              "label": "Logo left, navigation below"
            },  
            {
              "value": "center",
              "label": "Logo centered, navigation inline"
            },
            {
              "value": "center-below",
              "label": "Logo centered, navigation below"
            }
        ],
        "default": "center-below",
        "label": "Alignment"
      },
        {
            "type": "checkbox",
            "id": "header_position",
            "label": "Sticky header",
            "default": true,
            "info": "This affects both the header and the announcement bar section on desktop"
        },
        {
          "type": "header",
          "content": "Language selector",
          "info":  "To add a language, go to your [language settings.](/admin/settings/languages)"
        },
        {
          "type": "checkbox",
          "id": "enable_language",
          "label": "Show language selector",
          "default": true
        }, 
        {
          "type": "header",
          "content": "Currency Selector",
          "info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
        },
        {
          "type": "checkbox",
          "id": "enable_currency",
          "label": "Show currency selector",
          "default": true
        }, 
        {
            "type": "header",
            "content": "Logo"
        }, {
            "type": "image_picker",
            "id": "logo",
            "label": "Custom logo",
            "info": "450 x 200px .png"
        }, {
            "type": "range",
            "id": "logo_max_width",
            "min": 50,
            "max": 300,
            "step": 25,
            "unit": "px",
            "label": "Max logo width",
            "default": 100
        }, {
            "type": "header",
            "content": "Desktop navigation"
        }, {
            "type": "link_list",
            "id": "mainMenu",
            "label": "Desktop menu",
            "default": "main-menu"
        },
        {
            "type": "color",
            "id": "mega-nav-overlay-color",
            "label": "Overlay color",
            "default": "#ffffff"
        }, {
            "type": "range",
            "id": "mega-nav-overlay-opacity",
            "min": 0,
            "max": 90,
            "step": 10,
            "unit": "%",
            "label": "Overlay opacity",
            "default": 60,
            "info": "Controls the opacity of the page overlay when a menu dropdown is active."
        }, 
        {
            "type": "header",
            "content": "Mobile navigation"
        }, {
            "type": "link_list",
            "id": "mobileMenu",
            "label": "Mobile menu",
            "default": "main-menu"
        }, {
            "type": "select",
            "id": "mobile_nav_location",
            "label": "Mobile header location",
            "options": [
                {
                    "value": "top",
                    "label": "Top"
                }, {
                    "value": "bottom",
                    "label": "Bottom"
                }
            ],
            "default": "bottom",
            "label": "Mobile nav location"
        }, {
            "type": "checkbox",
            "id": "navigation_account_enable",
            "label": "Show account links",
            "default": false
        }, {
            "type": "checkbox",
            "id": "navigation_social_enable",
            "label": "Show social icons",
            "default": false
        }, {
            "type": "header",
            "content": "Mega menu"
        }, {
            "type": "checkbox",
            "id": "mega_menu_toggle",
            "label": "Enable mega-menu layout",
            "default": false,
            "info": "Enables Mega-menu layout on dropdown menu items. [Learn more](https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/drop-down-menus)"
        }, {
            "type": "header",
            "content": "Mega Menu Image"
        }, {
            "type": "text",
            "id": "mega-menu-ad-title",
            "label": "Heading",
            "default": "Navigation image"
        }, {
            "type": "richtext",
            "id": "mega-menu-ad-subtitle",
            "label": "Subheading",
            "default": "<p>Highlight promotions</p>"
        }, {
            "type": "text",
            "id": "mega-menu-ad-cta-text",
            "label": "Button text",
            "default": "Shop"
        }, {
            "type": "url",
            "id": "mega-menu-ad-cta-text-link",
            "label": "Button link"
        }, {
            "type": "image_picker",
            "id": "mega_ad_image",
            "label": "Image"
        }, {
            "type": "url",
            "id": "mega-menu-ad-image-link",
            "label": "Image link"
        }
    ]
}

{% endschema %}

 

0 Likes