Adding a Secondary Nav Under Mega-Menu

Solved
WolfTech777
Tourist
6 0 3

Hello, I'm working on a client's site that is running the Streamline theme and they are wanting to add in a secondary line of text/and or links under the native mega-menu in the header. Does anyone know how to add that into the liquid file?

 

Thank you so much for any help, I'm always looking to learn so I would much rather do the work to add this new section in. 

 

Screen Shot 2021-07-09 at 6.12.15 AM.png

KetanKumar
Shopify Partner
20437 2115 7712

@WolfTech777 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WolfTech777
Tourist
6 0 3
KetanKumar
Shopify Partner
20437 2115 7712

@WolfTech777 

thanks or its you have add some header under menu so can you try your header code copy and page 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WolfTech777
Tourist
6 0 3

@KetanKumar Sure thing, please see below and thank you so much for helping: 

 

{% comment %}
menu_alignment options:
- left
- left-center
- center-left
- center-split
- center
- right
{% endcomment %}

{%- liquid
assign main_menu = linklists[section.settings.main_menu_link_list]

assign menu_alignment = section.settings.main_menu_alignment
assign logo_alignment = 'left'
if menu_alignment == 'center-left' or menu_alignment == 'center-split' or menu_alignment == 'center'
assign logo_alignment = 'center'
endif
if menu_alignment == 'right'
assign logo_alignment = 'left-right'
endif

if main_menu == blank
assign logo_alignment = 'center'
endif

assign mobile_menu_style = 'thumb'

assign template_name = template | replace: '.', ' ' | truncatewords: 2, '' | handle

assign overlay_header = false
if template_name == 'index' and section.settings.sticky_index
assign overlay_header = true
endif
if template_name == 'collection' and collection.image and section.settings.sticky_collection
assign overlay_header = true
endif
-%}

{%- render 'slide-nav',
section: section,
main_menu: main_menu,
mobile_menu_style: mobile_menu_style
-%}
{%- if settings.cart_type == 'sticky' -%}
{%- render 'sticky-cart', mobile_menu_style: mobile_menu_style -%}
{%- endif -%}

{%- style -%}
.slide-nav,
.slide-nav button {
font-size: {{ settings.type_navigation_size }}px;
}

{% if mobile_menu_style == 'thumb' %}
body {
{% comment %}
Thumb menu button height + padding + 40
{% endcomment %}
padding-bottom: 148px;
}
{% endif %}

{% if mobile_menu_style == 'top' %}
body.screen-layer-open {
{% comment %}
Space for the close modal button
{% endcomment %}
padding-bottom: 40px;
}
{% endif %}

{% if overlay_header %}
@media only screen and (min-width: 769px) {
.collection-hero__content .section-header--hero {
margin-top: 40px;
}
}
{% endif %}
{%- endstyle -%}

<div data-section-id="{{ section.id }}" data-section-type="header-section">
<div
data-header-style="{{ section.settings.header_style }}"
class="header-wrapper{% if overlay_header %} header-wrapper--overlay is-light{% endif %}">

{%- if section.settings.show_announcement -%}
{%- if section.settings.show_announcement_home_only -%}
{%- if template == 'index' -%}
{%- render 'announcement-bar', section: section -%}
{%- endif -%}
{%- else -%}
{%- render 'announcement-bar', section: section -%}
{%- endif -%}
{%- endif -%}

{% comment %}
Logo is used as a between-screen loader, so we only
show the mobile logo on the home page (setting to override)
{% endcomment %}
{%- assign mobile_logo_only = true -%}

<header
class="site-header{% if section.settings.logo_hide_mobile %}{% unless template_name == 'index' %} small--hide{% endunless %}{% endif %}"
data-overlay="{{ overlay_header }}">
<div class="page-width">
<div
class="header-layout header-layout--{{ menu_alignment }}{% if mobile_logo_only %} header-layout--mobile-logo-only{% endif %}"
data-logo-align="{{ logo_alignment }}">

{%- if logo_alignment == 'left' or logo_alignment == 'left-right' -%}
<div class="header-item header-item--logo">
{%- render 'header-logo-block', section: section -%}
</div>
{%- endif -%}

{%- if logo_alignment == 'left' -%}
<div role="navigation" aria-label="Primary"
class="header-item header-item--navigation{% if menu_alignment == 'left-center' %} text-center{% endif %} small--hide">
{%- render 'header-desktop-nav', main_menu: main_menu -%}
</div>
{%- endif -%}

{%- if logo_alignment == 'center' -%}
<div class="header-item header-item--left header-item--navigation small--hide" role="navigation" aria-label="Primary">
{%- if menu_alignment == 'center' or menu_alignment == 'center-split' -%}
{%- if section.settings.header_search_enable -%}
<div class="site-nav">
<a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon js-modal-open-search-modal js-no-transition">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.title' | t }}</span>
</a>
</div>
{%- endif -%}
{%- endif -%}

{%- if menu_alignment == 'center-left' -%}
{%- render 'header-desktop-nav', main_menu: main_menu -%}
{%- endif -%}
</div>

{%- if menu_alignment == 'center-split' -%}
{%- render 'header-split-nav', main_menu: main_menu, section: section -%}
{%- endif -%}

{%- if menu_alignment != 'center-split' -%}
<div class="header-item header-item--logo">
{%- render 'header-logo-block', section: section -%}
</div>
{%- endif -%}
{%- endif -%}

{%- if logo_alignment == 'left-right' -%}
<div
role="navigation" aria-label="Primary"
class="header-item header-item--navigation text-right small--hide">
{%- render 'header-desktop-nav', main_menu: main_menu -%}
</div>
{%- endif -%}

{% comment %}
Center mobile logo if icons are not visible
{% endcomment %}
<div class="header-item header-item--icons{% if mobile_logo_only %} small--hide{% endif %}">
{%- render 'header-icons', section: section, menu_alignment: menu_alignment -%}
</div>
</div>

{%- if menu_alignment == 'center' -%}
<div role="navigation" aria-label="Primary" class="text-center">
{%- render 'header-desktop-nav', main_menu: main_menu -%}
</div>
{%- endif -%}
</div>
</header>
</div>

{%- if mobile_menu_style == 'thumb' -%}
{%- if main_menu != blank -%}
<div class="site-nav__thumb-menu site-nav__thumb-menu--inactive">
<button
type="button"
class="btn site-nav__thumb-button js-toggle-slide-nav">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 64 64"><path d="M7 15h51M7 32h43M7 49h51"/></svg>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon-menu-label">{{ 'general.drawers.navigation' | t }}</span>
</button>

<a href="{{ routes.cart_url }}" class="site-nav__thumb-cart js-drawer-open-cart js-no-transition" aria-controls="CartDrawer" data-icon="{{ settings.cart_icon }}">
<span class="cart-link">
{%- if settings.cart_icon == 'cart' -%}
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 64 64"><path d="M14 17.44h46.79l-7.94 25.61H20.96l-9.65-35.1H3"/><circle cx="27" cy="53" r="2"/><circle cx="47" cy="53" r="2"/></svg>
{%- else -%}
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-bag" viewBox="0 0 64 64"><g fill="none" stroke="#000" stroke-width="2"><path d="M25 26c0-15.79 3.57-20 8-20s8 4.21 8 20"/><path d="M14.74 18h36.51l3.59 36.73h-43.7z"/></g></svg>
{%- endif -%}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<span class="cart-link__bubble{% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %}">
<span class="cart-link__count" aria-hidden="true">
{{ cart.item_count }}
</span>
</span>
</span>
</a>
</div>
{%- endif -%}
{%- endif -%}
</div>

{%- if section.settings.header_search_enable -%}
{%- render 'search-modal' -%}
{%- endif -%}

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "header_style",
"label": "Desktop style",
"default": "button",
"options": [
{
"value": "button",
"label": "Sticky button"
},
{
"value": "bar",
"label": "Sticky bar"
},
{
"value": "top",
"label": "Top only"
}
]
},
{
"type": "select",
"id": "main_menu_alignment",
"label": "Header layout",
"default": "right",
"options": [
{
"value": "right",
"label": "Logo left, menu right"
},
{
"value": "left-center",
"label": "Logo left, menu center"
},
{
"value": "center-left",
"label": "Logo center, menu left"
},
{
"value": "center-split",
"label": "Logo center, menu split"
},
{
"value": "center",
"label": "Logo center, menu below"
}
]
},
{
"type": "checkbox",
"id": "sticky_index",
"label": "Overlay header over home page"
},
{
"type": "checkbox",
"id": "sticky_collection",
"label": "Overlay header over collection",
"info": "(if collection image is enabled)"
},
{
"type": "checkbox",
"id": "header_search_enable",
"label": "Enable search"
},
{
"type": "header",
"content": "Logo"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "image_picker",
"id": "logo-inverted",
"label": "White logo",
"info": "Used when on top of an image"
},
{
"type": "range",
"id": "desktop_logo_width",
"label": "Desktop logo width",
"default": 200,
"min": 80,
"max": 400,
"step": 10,
"unit": "px"
},
{
"type": "range",
"id": "mobile_logo_width",
"label": "Mobile logo width",
"default": 140,
"min": 50,
"max": 200,
"step": 10,
"unit": "px",
"info": "Set as a max-width, may appear smaller"
},
{
"type": "checkbox",
"id": "logo_hide_mobile",
"label": "Hide logo on mobile pages",
"default": true,
"info": "Maximizes screen space for your content. Add your logo under Animations to show your logo as the page loads instead. Logo always shows on home page."
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "main_menu_link_list",
"label": "Menu",
"default": "main-menu"
},

{
"type": "header",
"content": "Announcement bar"
},
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show an announcement"
},
{
"type": "checkbox",
"id": "show_announcement_home_only",
"label": "Home page only"
},
{
"type": "text",
"id": "announcement_text",
"label": "Announcement text",
"default": "Free shipping and returns"
},
{
"type": "url",
"id": "announcement_link",
"label": "Announcement link"
}
]
}
{% endschema %}

 

0 Likes
KetanKumar
Shopify Partner
20437 2115 7712

This is an accepted solution.

@WolfTech777 

yes, please create new section code and add theme.liquide below header section 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WolfTech777
Tourist
6 0 3

@KetanKumar Perfect, thank you!! 

KetanKumar
Shopify Partner
20437 2115 7712

@WolfTech777 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing