hello, ive been searching and searching for shopify stores that had the same idea i have, i know it had to be out there and i found this. (image below), i would love to have a basic menu on top and below collections main menu next to the stores icons, basically exactly like the image below, please help, thank you so much, can return a favor in photoshop form!
Hi @zachmosco
May I suggest to update code these steps:
-
Go to Store Online-> theme â edit code
-
Sections/header.liquid
-
Duplicate and change like the screenshot below
{
"type": "link_list",
"id": "menu_1",
"default": "main-menu",
"label": "Menu 1"
},
- update code below for this file. /* This suggestion only for Dawn theme */
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{%- if section.settings.menu_type_desktop == 'mega' -%}
{%- endif -%}
{%- if settings.cart_type == "drawer" -%}
{{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- style -%}
.header {
padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
}
.section-header {
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if settings.cart_type == "drawer" -%}
{%- endif -%}
{%- if section.settings.menu_1 != blank -%}
{%- for link in section.settings.menu_1.links -%}
- {%- if link.links != blank -%}
{%- else -%}
{{ link.title | escape }}
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
{%- if settings.cart_type == "notification" -%}
{%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- endif -%}
{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.header = document.getElementById('shopify-section-header');
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector('predictive-search');
this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;
this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.addEventListener('scroll', this.onScrollHandler, false);
this.createObserver();
}
disconnectedCallback() {
this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.removeEventListener('scroll', this.onScrollHandler);
}
createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});
observer.observe(this.header);
}
onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);
this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);
requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}
this.currentScrollTop = scrollTop;
}
hide() {
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
this.closeMenuDisclosure();
this.closeSearchModal();
}
reveal() {
this.header.classList.add('shopify-section-header-sticky', 'animate');
this.header.classList.remove('shopify-section-header-hidden');
}
reset() {
this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
}
closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
this.disclosures.forEach(disclosure => disclosure.close());
}
closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector('details-modal');
this.searchModal.close(false);
}
}
customElements.define('sticky-header', StickyHeader);
{% endjavascript %}
{%- if request.page_type == 'index' -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %}
{%- endif -%}
{% schema %}
{
"name": "t:sections.header.name",
"class": "section-header",
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "image_picker",
"id": "logo",
"label": "t:sections.header.settings.logo.label"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "t:sections.header.settings.logo_width.unit",
"label": "t:sections.header.settings.logo_width.label"
},
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "top-left",
"label": "t:sections.header.settings.logo_position.options__2.label"
},
{
"value": "top-center",
"label": "t:sections.header.settings.logo_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.header.settings.logo_position.options__1.label"
},
{
"value": "middle-center",
"label": "t:sections.header.settings.logo_position.options__4.label"
}
],
"default": "middle-left",
"label": "t:sections.header.settings.logo_position.label"
},
{
"type": "link_list",
"id": "menu_1",
"default": "main-menu",
"label": "Menu 1"
},
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "select",
"id": "menu_type_desktop",
"options": [
{
"value": "dropdown",
"label": "t:sections.header.settings.menu_type_desktop.options__1.label"
},
{
"value": "mega",
"label": "t:sections.header.settings.menu_type_desktop.options__2.label"
}
],
"default": "dropdown",
"label": "t:sections.header.settings.menu_type_desktop.label",
"info": "t:sections.header.settings.menu_type_desktop.info"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "checkbox",
"id": "enable_sticky_header",
"default": true,
"label": "t:sections.header.settings.enable_sticky_header.label",
"info": "t:sections.header.settings.enable_sticky_header.info"
},
{
"type": "header",
"content": "t:sections.header.settings.mobile_layout.content"
},
{
"type": "select",
"id": "mobile_logo_position",
"options": [
{
"value": "center",
"label": "t:sections.header.settings.mobile_logo_position.options__1.label"
},
{
"value": "left",
"label": "t:sections.header.settings.mobile_logo_position.options__2.label"
}
],
"default": "center",
"label": "t:sections.header.settings.mobile_logo_position.label"
},
{
"type": "header",
"content": "t:sections.all.spacing"
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.header.settings.margin_bottom.label",
"default": 0
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 20
}
]
}
{% endschema %}
If you use an other theme. You can use code below add a position that you want show.
{%- if section.settings.menu_1 != blank -%}
{%- for link in section.settings.menu_1.links -%}
- {%- if link.links != blank -%}
{%- else -%}
{{ link.title | escape }}
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
- Go to Store Online-> theme â Customize â Header â update Menu-1 that you would like to show on top. Update Menu that you would like to show next logo
1 Like
thank you so much, im on dawn theme, where should i put that code?
worked like a charm just another thing if you dont mind, the top menu is transparent, and also is sticky on scroll up, is it possible to make that menu not sticky?
sorry so many replies, someone who knows what there doing on this subject finally replied. as far as customizing them goes, can i change there background colors, make them transparent, or even put a separater line between them? if theres any way you can show me those little customizations that would be amazing, THANK YOU!!!
hi EBOOST, I need this solution but the screenshot is broken. could you explain one more time please?
Hi @loolakoola
Because in the new version schema: setting link_list type can only be inserted once in the settings. We canât use code above. So I suggest you create a menu and use code below instead
{% for link in linklists.[handle menu].links %}
- {{ link.title }}
{% endfor %}
Example for footer menu
{% for link in linklists.footer.links %}
- {{ link.title }}
{% endfor %}
1 Like
Thank you for your reply.
I have âmain menuâ and I want to put âlegalâ as 2nd menu.
Then, Which handle should I put that code on and what should I replace [handle menu] to?
Hi @loolakoola
With the code in the post above you find âsection.settings.menu_1.linksâ after that replace it with " linklists.legal.links"
but you said we canât use the code above. Sorry but could you explain once again? besides, I donât even know where to put the code you gave for original question.
Hi,
You copy code below after that put anywhere you would like to show
{%- if linklists.legal.links != blank -%}
{%- endif -%}
1 Like
Thank you so much. I put this code at the end of my header.liquid and it works!
One more thing please, but I want to show on mobile so I wrapped the code with @media screen and (max-width: 749px) but I canât see it. could you give me a hand?
Hi,
Do you only want to show this one on mobile? could you share your store ulr and protect password?
the case that you only would like to show on mobile.
- add class to nav for the second menu
2. Add CSS below to header.liquid
```markup
1 Like
this is my url and I want to put sub-menu(2nd menu) on mobile menu drawer. Thank you so much.
Hi @loolakoola
-
Go to Store Online-> theme â edit code
2.Sections/header.liquid -
Find âheader-drawerâ
-
Follow the screenshow below to add code.
Hi @EBOOST , I am trying to create a header like in the screenshot that @zachmosco posted. I am using the dawn theme, but the code no longer works for the reason you mentioned: âInvalid schema: setting link_list type can only be inserted once in the settings.â
How can I customize the header now? Thanks!
Hi @Samer3 ,
May I suggest to update code these steps:
-
Use the above
-
Remove code like screenshot below
- Check key of the second menu
Ex: I used legal menu here
- Find and replace âsection.settings.menu_1.linksâ with code below:
linklists.legal.links
1 Like
Hi there - this worked GREAT! One question for @EBOOST and anyone else on this thread. I put in the code and I have a second menu, which im super happy about. See screenshot:
-
how do I add padding on the left hand side so itâs in line with the logo?
-
how can I change the color and font size?
Thanks!
after replacing the code, the icon disappeared
tell me how to move the hamburger icon up like in the photo!
Thank you!
website: salebk.com
Hi,
Which theme are you working? The code above will not work for the newest dawn theme. Could you share your preview theme that you are working?