Hi there! I’ve added this code into the header.liquid section of my dawn theme and altered the code to the menus handle. Its created it in the themes style which is great, but its positioned it at the left hand side. Is there a way to centre the menu? Also when adding a background colour it does not apply to the ‘strip’ of this new menu, again, any way to change the colour? Thanks!
Topic summary
Goal: Create a dual-menu header layout in Shopify—one basic menu on top and a main collections menu below, positioned next to store icons.
Initial Solution (Dawn Theme):
- User EBOOST provided code modifications for
sections/header.liquid - Involved duplicating menu settings and adding custom navigation markup
- Required creating a second menu in Shopify admin and referencing it via handle (e.g.,
linklists.legal.links)
Key Challenge:
Newer Dawn theme versions restrict link_list schema type to single use, breaking the original approach. The workaround involves directly referencing menu handles instead of using schema settings.
Common Customization Requests:
- Removing sticky behavior from top menu
- Adjusting background colors and transparency
- Adding separator lines between menus
- Controlling font size (solution: modify CSS, e.g.,
font-size: 16px) - Centering menu alignment and padding adjustments
- Mobile drawer integration
- Creating dropdown/collapsible menu sections
Current Status:
Ongoing troubleshooting for various users implementing the solution. Recent issues include schema validation errors (“id too long”) when applying code modifications. Users need to share their specific header.liquid code for tailored solutions, as implementation varies by theme version.
Hello EBOOST. I found this post really helpful and I almost got the wanted result with the original version of the code. However I tried for a while and there was no way for me to place that second menu bar under the header. Could you help me out?
Hi @Ano2 ,
Could you share your code( sections/header.liquid)? I will help adjust code to update it.
Hi eboost, I really find this very helpful. is there a way that we can hide the links on a certain div and make it a drop down like this?
this is what I want to achieve. the links will be under brands dropdown list.
Hi @Marlon123 ,
It’s possible. Could you share your store? We will check it after that will suggest a solution for you.
This is from draft, here is the preview
https://buqgamsd67u9gkve-81817796888.shopifypreview.com
source code is this:
{% comment %}
Renders a standard dropdown style menu for the header.
Usage:
{% render ‘header-dropdown-menu’ %}
{% endcomment %}
{% for block in section.blocks %}
{% if block.type == ‘drop’ %}
Brands
{% render 'v-svg' %}
-
{%- for link in block.settings.menu_2.links -%}
-
{%- if link.links != blank -%}
{%- else -%} {{- link.title | escape -}} {%- endif -%}
{{- link.title | escape -}} {% render 'icon-caret' %}
-
{%- for childlink in link.links -%}
-
{%- if childlink.links == blank -%}
{{ childlink.title | escape }}
{%- else -%}
{%- endif -%}
{{ childlink.title | escape }} {% render 'icon-caret' %}
-
{%- for grandchildlink in childlink.links -%}
- {{ grandchildlink.title | escape }} {%- endfor -%}
{%- endfor -%}
{%- endfor -%}
-
{%- if childlink.links == blank -%}
{{ childlink.title | escape }}
{%- else -%}
{% endif %}
{% endfor %}
Hi @Marlon123 ,
Maybe I suggest use code below:
{% comment %}
Renders a standard dropdown style menu for the header.
Usage:
{% render 'header-dropdown-menu' %}
{% endcomment %}
{% for block in section.blocks %}
{% if block.type == 'drop' %}
{% endif %}
{% endfor %}
Hi,
I helped when click brand after that will show it. If you dont want it you can remove some CSS like the screenshot below:
I think we’re getting somewhere. that happens if I remove the display none. how about when i click brands the css will change from display none to just display? will that be possible?
Hi,
It is possible. You can use code below:
{% comment %}
Renders a standard dropdown style menu for the header.
Usage:
{% render 'header-dropdown-menu' %}
{% endcomment %}
{% for block in section.blocks %}
{% if block.type == 'drop' %}
{% endif %}
{% endfor %}
Works like a charm. Thank you for your guidance, Really appreciate it!
Hello EBOOST, I solved the previous issue but now I require your help with another.
Somehow I have changed the nature of the header and I can not add blocks to it if I wanted to and I am not sure why.
If you think you would be able to help me out with the issue I will email you with more detail regarding the problem.
Hi,
Ok.
Hi EBOOST, and thanks, this is really helpful!
What would I need to do to edit font size of the first menu (the one with the white background)?
And also in the section where I can personalise my theme, after I added your codes it went a little crazy, what do I need to do to sort it out?
Thanks so much!
Hi @RuthiCreative ,
Could you share your store url? I will help to take a look it.
Sure! Thanks 
Hi @RuthiCreative ,
May I suggest code below to fix it and change font size to 16px;
{%- 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": "header",
"class": "section-header",
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "accent-1"
},
{
"value": "accent-2",
"label": "accent-2"
},
{
"value": "background-1",
"label": "background-1"
},
{
"value": "background-2",
"label": "background-2"
},
{
"value": "inverse",
"label": "inverse"
}
],
"default": "background-1",
"label": "colors"
},
{
"type": "image_picker",
"id": "logo",
"label": "logo"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "logo width",
"label": "logo width"
},
{
"type": "select",
"id": "logo_position",
"options": [
{
"value": "top-left",
"label": "top-left"
},
{
"value": "top-center",
"label": "top-center"
},
{
"value": "middle-left",
"label": "middle-left"
},
{
"value": "middle-center",
"label": "middle-center"
}
],
"default": "middle-left",
"label": "logo position"
},
{
"type": "link_list",
"id": "menu_1",
"default": "main-menu",
"label": "Menu 1"
},
{
"type": "link_list",
"id": "menu",
"default": "main-menu",
"label": "menu"
},
{
"type": "select",
"id": "menu_type_desktop",
"options": [
{
"value": "dropdown",
"label": "dropdown"
},
{
"value": "mega",
"label": "mega"
}
],
"default": "dropdown",
"label": "menu type desktop",
"info": "menu type desktopo"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "show line separator"
},
{
"type": "checkbox",
"id": "enable_sticky_header",
"default": true,
"label": "enable sticky header",
"info": "enable sticky header"
},
{
"type": "header",
"content": "mobile layout"
},
{
"type": "select",
"id": "mobile_logo_position",
"options": [
{
"value": "center",
"label": "center"
},
{
"value": "left",
"label": "left"
}
],
"default": "center",
"label": "mobile logo position"
},
{
"type": "header",
"content": "spacing"
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "margin bottom",
"default": 0
},
{
"type": "header",
"content": "Padding heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "padding top",
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 36,
"step": 4,
"unit": "px",
"label": "padding bottomm",
"default": 20
}
]
}
{% endschema %}
If you want to change other font size. You can refer screenshot below to change from 16px to any value that you want to change.
Thank you so much @EBOOST , I am having troubles though because it tells me there is a problem with the code. (It says the id=“logo_width” is too long).
What I did was to substitute your code with the one that was in the header.liquid, was this not what I was supposed to do?
Thank you again.
Hi @RuthiCreative ,
which theme are you using? code only match for some shopify theme free. Could you please share you section/header.liquid. I will help to apply code for you.