Creating a Split Navigation and Calling Secondary Nav in Liquid

Solved
BirdieGolden
Shopify Partner
50 1 6

Hi All, 

 

I've created three navigation lists:

 

Left Navigation  (menu-left)

Right Navigation (menu-right)

Mobile Menu (mobile-menu)

 

I've set up the structure so I have a split menu, but I can't figure out how to call the menu. It's just showing the same menu. 

 

I've attempted to add to my schema, but I get errors (nondescript) because I'm sure I'm missing a key element here.

 

Any help or documentation in the right direction would be appreciated!  

 

https://helloplia.myshopify.com/  (you can see I have two of the same nav split, I just am not getting the menu-right nav I created under navigation).


My Right Menu:

 

<!-- Right Menu -->
              <div data-desktop-navigation-container>
              <nav role="navigation">
                <ul class="t--header-navigation site-nav list--reset m0 p0 font-size--m mxn1 no-wrap inline-block"  data-desktop-navigation-list>
                  {% for link in linklists[section.settings.menu-right_linklist].links %}
                    {%- assign child_list_handle = link.title | handleize -%}
                    {% if menus[child_list_handle].links != blank %}
                      <li class="nav__item site-nav--has-submenu{% if link.active %} site-nav--active{% endif %}  inline-block">
                        <a class="site-nav__link {{ header_underline_link }}  px1 inline-block header__link no-wrap pointer {% if forloop.last %}site-nav__link--last{% endif %}"  data-active-header-trigger data-active-target="navigation" data-first-level-link="desktop" data-key="{{ child_list_handle }}--{{ forloop.index }}" data-top-level-item tabindex="0"  aria-haspopup="true">
                          <div class="header__link-wrapper">
                            {{ link.title }}
                            <span class="site-nav__chevron-down font-size--xxs align--middle inline-block site-nav__svg">{% include 'svg', icon: 'icon-chevron-down' %}</span>
                            <span class="site-nav__chevron-up font-size--xxs  align--middle inline-block site-nav__svg hide">{% include 'svg', icon: 'icon-chevron-up' %}</span>
                          </div>
                        </a>
                        {%- assign link_handle = link.title | handleize -%}
                        {% include 'no-js__submenu' %}
                      </li>
                    {% else %}
                      <li class="nav__item inline-block {% if link.active %}site-nav--active{% endif %}" >
                        <a href="{{ link.url }}" class="site-nav__link {{ header_underline_link }} px1 align--top header__link inline-block no-wrap" data-top-level-item>
                          <div class="header__link-wrapper">{{ link.title }}</div>
                        </a>
                      </li>
                    {% endif %}
                  {% endfor %}
                  <li class="site-nav--has-submenu inline-block hide" data-desktop-navigation-more-link>
                    <a class="site-nav__link {{ header_underline_link }} px2 inline-block header__link no-wrap pointer" data-desktop-navigation-more-link-trigger  data-top-level-item tabindex="0">
                      <div class="header__link-wrapper">
                        {{ 'general.navigation.more' | t }}
                      </div>
                    </a>
                  </li>
                </ul>

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "checkbox",
"id": "show_cart_icon",
"label": "Show cart icon",
"info": "If disabled text will be shown instead of icon"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 450,
"step": 10,
"unit": "px",
"label": "Custom logo width",
"default": 250
},
{
"type": "checkbox",
"id": "sticky_header",
"label": "Sticky header on desktop",
"default": false
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "main_linklist",
"label": "Menu",
"default": "main-menu"
},
{
"type": "link_list",
"id": "menu-right_linklist",
"label": "Menu Right",
"default": "main-right"
},
{
"type": "checkbox",
"id": "show_all_navigation_links",
"label": "Enable links to drop-down link headings"
},
{
"type": "checkbox",
"id": "show_search",
"label": "Show search"
},
{
"type": "header",
"content": "Mobile menu"
},
{
"type": "checkbox",
"id": "show_menu_icon",
"label": "Show menu icon",
"info": "If disabled text will be shown instead of icon"
},
{
"type": "link_list",
"id": "secondary_linklist",
"label": "Secondary menu"
},
{
"type": "checkbox",
"id": "show_search_sidebar",
"label": "Show search"
},
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show announcement",
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": "Home page only",
"default": true
},
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Announce something here"
},
{
"type": "select",
"id": "announcement_color",
"options": [
{ "value": "primary", "label": "Primary"},
{ "value": "secondary ", "label": "Secondary"},
{ "value": "tertiary", "label": "Tertiary"}
],
"label": "Announcement color combination"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
],
"blocks": [
{
"type": "banner",
"name": "Banner image",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1400x800px recommended"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Image - mobile (optional)",
"info": "800x1000px recommended."
},
{
"type": "select",
"id": "image_style",
"label": "Image style:",
"options": [
{
"value": "full_screen",
"label": "Full Screen"
},
{
"value": "fit_content",
"label": "Content"
}
],
"info": "Use \'Content\' style to avoid image cropping."
},
{
"type": "select",
"id": "overlay_text_color",
"label": "Text color",
"info": "Override header text color for the home page when banner image is enabled.",
"options": [
{ "value": "primary", "label": "Primary text"},
{ "value": "secondary", "label": "Secondary text"},
{ "value": "tertiary", "label": "Tertiary text"},
{ "value": "white", "label": "White"},
{ "value": "black", "label": "Black"}
]
},
{
"type": "image_picker",
"id": "logo_alternate",
"label": "Logo image",
"info": "Alternate logo for the banner image"
}
]
}
]
}
{% endschema %}

 

 

0 Likes
BirdieGolden
Shopify Partner
50 1 6

This is an accepted solution.

Just in case anyone is inquiring about this as well, the best way I've found to split the navigation is to create THREE separate navigation menus.

 

1. Left menu

2. Right menu

3. Mobile menu

 

Then use the header.liquid (in sections for my theme) to create the appropriate schema items so the right menu and mobile menu exist, then split up the HTML containers (so there are two, one to the left and on to the right, around the logo - placing the liquid script to call those navigation elements within the correct containers.

 

I hope this helps anyone searching for this answer. 

example of the for loop:
{% for link in linklists[section.settings.menu-right_linklist].links %}
Your html markup
{% endfor  %}

schema example:

{
"type": "link_list",
"id": "menu-right_linklist",
"label": "Menu Right",
"default": "main-menu"
}

0 Likes
Mariannag7282
New Member
3 0 1

Thanks.  But this still doesn't answer how to add the second menu in the code so that it's displayed in the header.  

 

0 Likes